three.js - 如何在网页生成一个模型 （初探）

1. 首先下载模型

sketchfab.com/3d-models/c…

找一个glb格式。

2. 引入需要的文件

    <script src="./three.js"></script>
    <script src="./GLTFLoader.js"></script>  //用来做模型的加载
    <script src="./OrbitControls.js"></script>  // 用来做场景的缩放，视角控制，主要是利用变换相机的位置。

3. 设置

var scene = new THREE.Scene();
scene.background = new THREE.Color('black');

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

添加一个屏幕 ，给他设置下颜色。 准备一个渲染器。

4. 设置相机

...
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
camera.position.set(0, 0, 10);
camera.lookAt(0, 1, 10);
...

5.设置轴线长度

var axis = new THREE.AxisHelper(3); // 3表示轴的长度  红绿蓝 分别是x y z 
scene.add(axis);

方便我们调整各种x,y,z 位置

6.加载模型

var loader = new THREE.GLTFLoader();
loader.load('./glb-2/source/Predator_s.glb', function (obj) {
    scene.add(obj.scene);
    renderer.render(scene, camera)
}, undefined, function (error) {
    console.error(error);
});

加载完之后啥也看不到,只有轴线显示

7.添加灯光

var datas = [[0, 20, 0], [0, -20, 0], [20, 0, 0], [-20, 0, 0]];
for (let i = 0; i < datas.length; i++) {
    var spotLight = new THREE.DirectionalLight(0xffffff, 5); //平行光
    spotLight.position.x = datas[i][0];
    spotLight.position.y = datas[i][1];
    spotLight.position.z = datas[i][2];
    scene.add(spotLight);
}

看了 各种聚光灯，点光，环境光，个人感觉平行光显示最好。设置了4个平行光。

8. 添加控制

let controls = new THREE.OrbitControls(camera, renderer.domElement);  //用到之前的OrbitControls.js
controls.addEventListener("change", renderer);   //监听改变
const animate = () => {
    camera.lookAt(0, 1, 0)  //设置一下初始查看的点
    renderer.render(scene, camera);   
    requestAnimationFrame(animate); //每一帧变换执行
}

9. 主要代码:

var scene = new THREE.Scene();
scene.background = new THREE.Color('black');

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);




var camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, .1, 100);
camera.lookAt(0, 1.4, 0)
camera.position.set(0, 0, 10);


var axis = new THREE.AxisHelper(3); // 3表示轴的长度  红绿蓝 分别是x y z 
scene.add(axis);

var datas = [[0, 20, 0], [0, -20, 0], [20, 0, 0], [-20, 0, 0]];

for (let i = 0; i < datas.length; i++) {
    var spotLight = new THREE.DirectionalLight(0xffffff, 5); //平行光
    spotLight.position.x = datas[i][0];
    spotLight.position.y = datas[i][1];
    spotLight.position.z = datas[i][2];
    scene.add(spotLight);
}


var loader = new THREE.GLTFLoader();
loader.load('./glb-2/source/Predator_s.glb', function (obj) {
    scene.add(obj.scene);
    animate();
}, undefined, function (error) {
    console.error(error);
});

let controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", renderer);
const animate = () => {
    camera.lookAt(0, 1, 0)
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}