本文最后更新于 <span id="expire-date"></span> 天前,文中部分描述可能已经过时。

效果展示

关于Threejs

Three.js是基于原生WebGL封装运行的三维引擎,在所有WebGL引擎中,Three.js是国内文资料最多、使用最广泛的三维引擎。

Iframe

1
<iframe id="modelFrame" src="https://ts.undf.top/3d/bysj.html" width="100%" height="75%" style = "border-radius: 10px;" frameborder="0"></iframe>

为了方便引入,采用iframe框架,可以有效减少引入处的代码长度。

源码仓库

点我

仓库内3d文件夹下面即是所有源代码。如果不需要自定义修改,建议复制整个文件夹到你的目录内,如果需要自定义模型和样式,请参照下面的关键代码解释

关键代码

如果需要更改js文件的位置需要修改 html 文件里面的位置和 stl.js 文件内的位置。

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
139
140
141
142
143
// 如果需要修改文件位置,记得修改这里的路径
import * as THREE from './build/three.module.js';

import Stats from './build/stats.js';

import { STLLoader } from './build/stl.js';

let container, stats;

let camera, cameraTarget, scene, renderer;

init();
animate();

function init() {

container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 30 );
camera.position.set( 0, 0.85, 0 );
//相机位置
cameraTarget = new THREE.Vector3( 0, - 0.25, 0 );

scene = new THREE.Scene();
scene.background = new THREE.Color( 0x72645b );
scene.fog = new THREE.Fog( 0x72645b, 2, 15 );

// Ground
//
const plane = new THREE.Mesh(
new THREE.PlaneGeometry( 40, 40 ),
new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
);
plane.rotation.x = - Math.PI / 2;
plane.position.y = - 0.5;
scene.add( plane );

plane.receiveShadow = true;




const loader = new STLLoader();


// Binary files。即 二进制 stl 文件

const material = new THREE.MeshPhongMaterial( { color: 0xAAAAAA, specular: 0x111111, shininess: 200 } );

loader.load( './model/bysj.stl', function ( geometry ) {

const mesh = new THREE.Mesh( geometry, material );
//模型参数
mesh.position.set( 0, - 0.18, - 0.1 );
mesh.rotation.set( - Math.PI / 2, 0, 0 );
mesh.scale.set( 0.008, 0.008, 0.008 );

mesh.castShadow = true;
mesh.receiveShadow = true;

scene.add( mesh );

} );

scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );

addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
addShadowedLight( 0.5, 1, - 1, 0xffaa00, 1 );
// renderer

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.outputEncoding = THREE.sRGBEncoding;

renderer.shadowMap.enabled = true;

container.appendChild( renderer.domElement );

// stats

stats = new Stats();
container.appendChild( stats.dom );

//

window.addEventListener( 'resize', onWindowResize );

}

function addShadowedLight( x, y, z, color, intensity ) {

const directionalLight = new THREE.DirectionalLight( color, intensity );
directionalLight.position.set( x, y, z );
scene.add( directionalLight );

directionalLight.castShadow = true;

const d = 1;
directionalLight.shadow.camera.left = - d;
directionalLight.shadow.camera.right = d;
directionalLight.shadow.camera.top = d;
directionalLight.shadow.camera.bottom = - d;

directionalLight.shadow.camera.near = 1;
directionalLight.shadow.camera.far = 4;

directionalLight.shadow.bias = - 0.002;

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

requestAnimationFrame( animate );

render();
stats.update();

}

function render() {

const timer = Date.now() * 0.0005;

camera.position.x = Math.cos( timer ) * 3;
camera.position.z = Math.sin( timer ) * 3;

camera.lookAt( cameraTarget );

renderer.render( scene, camera );

}

本文作者:wxy

本文链接: https://c.undf.top/posts/e90952d5/

文章默认使用 CC BY-NC-SA 4.0 协议进行许可,使用时请注意遵守协议。

评论,秒回。

评论

如评论失效,请点击最下方的邮件图标联系作者。