原生javascript Threejs模板
# 前言
该脚本模板是基于官方工程的，建议先去安装 官方项目地址：https://github.com/mrdoob/three.js
# 正文
安装后把这个页面放在examples这个目录下即可，命令什么都行，这里实例命名 demo.html
启动后访问地址 http://localhost:8080/examples/demo.html 就可以看到案例了。
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - demo模板</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
<style>
html, body {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="module">
import * as THREE from '../build/three.module.js';
import {OrbitControls} from './jsm/controls/OrbitControls.js';
import Stats from './jsm/libs/stats.module.js';
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var renderer, scene, camera, orbitcontrols, stats, gui;
var clock = new THREE.Clock();
init();
animate();
window.addEventListener('resize', onWindowResize, false);
function init() {
initStats()
initRenderer();
initScene();
initLights();
initCamera();
initControls();
initBox();
initHelp();
}
function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
}
function initRenderer() {
var container = document.getElementById('container');
renderer = new THREE.WebGLRenderer({antialias: true, alpha: true, logarithmicDepthBuffer: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(WIDTH, HEIGHT);
container.appendChild(renderer.domElement);
}
function initScene() {
scene = new THREE.Scene();
}
function initCamera() {
camera = new THREE.PerspectiveCamera(75, WIDTH / HEIGHT, 0.1, 100000);
// 确定相机位置 并将相机指向场景中心
camera.position.x = 0.5;
camera.position.y = 1;
camera.position.z = 1.5;
camera.lookAt(scene.position);
}
function initControls() {
orbitcontrols = new OrbitControls(camera, renderer.domElement);
// 如果使用animate方法时，将此函数删除
//controls.addEventListener( 'change', render );
// 使动画循环使用时阻尼或自转 意思是否有惯性
orbitcontrols.enableDamping = true;
//动态阻尼系数 就是鼠标拖拽旋转灵敏度
//controls.dampingFactor = 0.25;
//是否可以缩放
orbitcontrols.enableZoom = true;
//是否自动旋转
orbitcontrols.autoRotate = true;
orbitcontrols.autoRotateSpeed = 0.5;
//设置相机距离原点的最远距离
orbitcontrols.minDistance = 1;
//设置相机距离原点的最远距离
orbitcontrols.maxDistance = 2000;
//是否开启右键拖拽
orbitcontrols.enablePan = true;
orbitcontrols.addEventListener('change', printPosition);
}
function printPosition() {
console.info("X=" + camera.position.x);
console.info("Y=" + camera.position.y);
console.info("Z=" + camera.position.z);
}
function initLights() {
scene.add(new THREE.AmbientLight(0x444444,1));
var light = new THREE.PointLight(0xffffff);
light.position.set(0,50, 0);
light.castShadow = true;
scene.add(light);
}
function initBox() {
var geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2)
var material = new THREE.MeshNormalMaterial()
var mesh = new THREE.Mesh(geometry, material)
scene.add(mesh);
}
function initHelp() {
//AxisHelper是一个坐标轴对象，添加到场景中我们就可以看到世界坐标系的具体位置
var axes = new THREE.AxesHelper(10000);
scene.add(axes);
}
function onError() {
alert("报错了");
}
function onWindowResize() {
camera.aspect = container.offsetWidth / container.offsetHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
stats.update();
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138