Skip to content

Commit 2f8bd4e

Browse files
JulyJuly
July
authored and
July
committed
initial commit
0 parents  commit 2f8bd4e

File tree

7 files changed

+49963
-0
lines changed

7 files changed

+49963
-0
lines changed

Diff for: ‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.idea/
2+
.vscode/

Diff for: ‎README.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Three.js渲染SketchUp开发web 3D
2+
3+
##方法一
4+
5+
###1. 用SketchUp制作模型，并导出为.dae文件
6+
7+
###2.导入所需库文件
8+
9+
```
10+
<script type="text/javascript" src="./libs/three.js"></script>
11+
<script type="text/javascript" src="./libs/ColladaLoader.js"></script>
12+
```
13+
14+
这里的ColladaLoader.js并不包含在three.js文件里面，需要单独应用。
15+
16+
​
17+
18+
##方法二
19+
20+
### 通过在线工具https://threejs.org/editor/，导入3D模型文件，在线配置效果，效果满意后publish，会自动生成对应的工程包，直接部署即可。
21+

Diff for: ‎demo.dae

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
2+
<COLLADA xmlns="http://www.collada.org/2005/11/COLLADASchema" version="1.4.1">
3+
<asset>
4+
<contributor>
5+
<authoring_tool>Google SketchUp 8.0.14345</authoring_tool>
6+
</contributor>
7+
<created>2017-08-22T02:40:04Z</created>
8+
<modified>2017-08-22T02:40:04Z</modified>
9+
<unit meter="0.0254000" name="inch" />
10+
<up_axis>Z_UP</up_axis>
11+
</asset>
12+
<library_visual_scenes>
13+
<visual_scene id="ID1">
14+
<node name="SketchUp">
15+
<instance_geometry url="#ID2">
16+
<bind_material>
17+
<technique_common>
18+
<instance_material symbol="Material2" target="#ID4">
19+
<bind_vertex_input semantic="UVSET0" input_semantic="TEXCOORD" input_set="0" />
20+
</instance_material>
21+
</technique_common>
22+
</bind_material>
23+
</instance_geometry>
24+
</node>
25+
</visual_scene>
26+
</library_visual_scenes>
27+
<library_geometries>
28+
<geometry id="ID2">
29+
<mesh>
30+
<source id="ID5">
31+
<float_array id="ID8" count="72">78.4881890 144.7795276 0.0000000 0.0000000 0.0000000 0.0000000 0.0000000 144.7795276 0.0000000 78.4881890 0.0000000 0.0000000 0.0000000 144.7795276 82.4803150 0.0000000 0.0000000 0.0000000 0.0000000 0.0000000 82.4803150 0.0000000 144.7795276 0.0000000 0.0000000 144.7795276 82.4803150 78.4881890 144.7795276 0.0000000 0.0000000 144.7795276 0.0000000 78.4881890 144.7795276 82.4803150 78.4881890 144.7795276 0.0000000 78.4881890 0.0000000 82.4803150 78.4881890 0.0000000 0.0000000 78.4881890 144.7795276 82.4803150 78.4881890 0.0000000 82.4803150 0.0000000 0.0000000 0.0000000 78.4881890 0.0000000 0.0000000 0.0000000 0.0000000 82.4803150 78.4881890 0.0000000 82.4803150 0.0000000 144.7795276 82.4803150 0.0000000 0.0000000 82.4803150 78.4881890 144.7795276 82.4803150</float_array>
32+
<technique_common>
33+
<accessor count="24" source="#ID8" stride="3">
34+
<param name="X" type="float" />
35+
<param name="Y" type="float" />
36+
<param name="Z" type="float" />
37+
</accessor>
38+
</technique_common>
39+
</source>
40+
<source id="ID6">
41+
<float_array id="ID9" count="72">0.0000000 0.0000000 -1.0000000 0.0000000 0.0000000 -1.0000000 0.0000000 0.0000000 -1.0000000 0.0000000 0.0000000 -1.0000000 -1.0000000 0.0000000 0.0000000 -1.0000000 0.0000000 0.0000000 -1.0000000 0.0000000 0.0000000 -1.0000000 0.0000000 0.0000000 -0.0000000 1.0000000 0.0000000 -0.0000000 1.0000000 0.0000000 -0.0000000 1.0000000 0.0000000 -0.0000000 1.0000000 0.0000000 1.0000000 0.0000000 0.0000000 1.0000000 0.0000000 0.0000000 1.0000000 0.0000000 0.0000000 1.0000000 0.0000000 0.0000000 -0.0000000 -1.0000000 -0.0000000 -0.0000000 -1.0000000 -0.0000000 -0.0000000 -1.0000000 -0.0000000 -0.0000000 -1.0000000 -0.0000000 0.0000000 0.0000000 1.0000000 0.0000000 0.0000000 1.0000000 0.0000000 0.0000000 1.0000000 0.0000000 0.0000000 1.0000000</float_array>
42+
<technique_common>
43+
<accessor count="24" source="#ID9" stride="3">
44+
<param name="X" type="float" />
45+
<param name="Y" type="float" />
46+
<param name="Z" type="float" />
47+
</accessor>
48+
</technique_common>
49+
</source>
50+
<vertices id="ID7">
51+
<input semantic="POSITION" source="#ID5" />
52+
<input semantic="NORMAL" source="#ID6" />
53+
</vertices>
54+
<triangles count="12" material="Material2">
55+
<input offset="0" semantic="VERTEX" source="#ID7" />
56+
<p>0 1 2 1 0 3 4 5 6 5 4 7 8 9 10 9 8 11 12 13 14 13 12 15 16 17 18 17 16 19 20 21 22 21 20 23</p>
57+
</triangles>
58+
</mesh>
59+
</geometry>
60+
</library_geometries>
61+
<library_materials>
62+
<material id="ID4" name="material">
63+
<instance_effect url="#ID3" />
64+
</material>
65+
</library_materials>
66+
<library_effects>
67+
<effect id="ID3">
68+
<profile_COMMON>
69+
<technique sid="COMMON">
70+
<lambert>
71+
<diffuse>
72+
<color>1.0000000 1.0000000 1.0000000 1.0000000</color>
73+
</diffuse>
74+
</lambert>
75+
</technique>
76+
</profile_COMMON>
77+
</effect>
78+
</library_effects>
79+
<scene>
80+
<instance_visual_scene url="#ID1" />
81+
</scene>
82+
</COLLADA>

Diff for: ‎index.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Roulette</title>
6+
<style type="text/css">
7+
body {
8+
margin: 0;
9+
}
10+
canvas {
11+
width: 100%;
12+
height: 100%;
13+
}
14+
</style>
15+
<script type="text/javascript" src="./libs/three.js"></script>
16+
<script type="text/javascript" src="./libs/ColladaLoader.js"></script>
17+
<script type="text/javascript" src="./js/game.js"></script>
18+
</head>
19+
<body onload="startGame();">
20+
</body>
21+
</html>

Diff for: ‎js/game.js

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
var scene, camera,renderer, rouletteScene;
2+
function startGame(){
3+
console.log('Game started...');
4+
scene = new THREE.Scene();
5+
aspect = window.innerWidth/window.innerHeight;
6+
D = 8;
7+
camera = new THREE.OrthographicCamera(-D*aspect, D*aspect, D, -D, 1, 1000);
8+
// camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight,0.1,200)
9+
renderer = new THREE.WebGLRenderer();
10+
renderer.setSize(window.innerWidth, window.innerHeight);
11+
document.body.appendChild(renderer.domElement);
12+
/*
13+
var spotLight = new THREE.SpotLight( 0xffffff );
14+
spotLight.position.set( 100, 1000, 100 );
15+
16+
spotLight.castShadow = true;
17+
18+
spotLight.shadow.mapSize.width = 1024;
19+
spotLight.shadow.mapSize.height = 1024;
20+
21+
spotLight.shadow.camera.near = 500;
22+
spotLight.shadow.camera.far = 4000;
23+
spotLight.shadow.camera.fov = 30;
24+
25+
scene.add( spotLight );
26+
*/
27+
var light = new THREE.DirectionalLight( 0xffffff, 2 );
28+
light.position.set( 100, 20, 15 );
29+
scene.add( light );
30+
31+
camera.position.set(100,100,100);
32+
camera.lookAt(new THREE.Vector3(0,0,0));
33+
camera.rotation.z = 5/6*Math.PI;
34+
35+
var loader = new THREE.ColladaLoader();
36+
loader.load("./demo.dae", function( collada ){
37+
rouletteScene = collada.scene;
38+
rouletteScene.scale.set(0.017,0.017,0.017);
39+
rouletteScene.position.set(0,0,0);
40+
scene.add(rouletteScene);
41+
},
42+
function( xhr) {
43+
console.log((xhr.loaded/xhr.total * 100)+"% loaded");
44+
});
45+
46+
render();
47+
}
48+
49+
50+
function render(){
51+
requestAnimationFrame(render);
52+
renderer.render(scene, camera);
53+
if( rouletteScene ){
54+
rouletteScene.rotation.z = rouletteScene.rotation.z+ 0.01;
55+
}
56+
}
57+
58+
window.onresize = function() {
59+
aspect = window.innerWidth/window.innerHeight;
60+
renderer.setSize(window.innerWidth, window.innerHeight);
61+
};

0 commit comments

Comments
 (0)