Three.js 官网

CDN加载

three.js (vr128) - Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它在 web 中创建各种三维场景，包括了摄影机、光影、材质等各种对象。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
https://www.bootcdn.cn/three.js/

官网

https://threejs.org/

下载

https://github.com/mrdoob/three.js/archive/master.zip
图片.png
three.js使用 build 中的文件

Loader

src/loaders里面有各种loader
examples\js\loaders
图片.png

本次案例使用的是

网上找gtlf类型的3d资源

搜索_免费_glb gltf素材网

http://glbxz.com/i/

本次使用的资源

餐具007免费_glb gltf素材网
http://glbxz.com/mobile/qingwen/1845.html

代码部分

index.html
加载three.js
加载脚本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="scene">
    </div>
    <script src="./three.min.js"></script>
    <script src="./GLTFLoader.js"></script>
    <script src="./app.js"></script>
</body>
</html>

app.js

声明容器,照相机,渲染器,场景,展示对象变量
获取dom元素作为容器
使用THREE创建场景
声明视角变量fov,aspect比例,近点0.1,范围远点500
创建视角照相机
设置照相机位置
创建环境光设置环境光位置,为场景添加环境光
创建webgl渲染器
设置渲染器大小为容器大小,比例为容器比例
设置渲染器比率为显示器比率
创建GITFloader
加载gltf模型
把gltf模型添加到场景中
为模型添加animation
场景渲染
监听window的resize事件
窗口比例变化重新设定照相机的视角比例更新矩阵设置大小 ```javascript //Variables for setup

let container; let camera; let renderer; let scene; let house;

function init() { container = document.querySelector(“.scene”);

//Create scene scene = new THREE.Scene();

const fov = 35; const aspect = container.clientWidth / container.clientHeight; const near = 0.1; const far = 500;

//camera setup

camera = new THREE.PerspectiveCamera(fov, aspect, near, far); camera.position.set(0.1, 0.2, 2.5);

const ambient = new THREE.AmbientLight(0xefefef, 0.5);

scene.add(ambient);

const light = new THREE.DirectionalLight(0xffffff, 0.7); light.position.set(10, 10, 10); scene.add(light);

//renderer setup renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(container.clientWidth, container.clientHeight); renderer.setPixelRatio(window.devicePixelRatio);

container.appendChild(renderer.domElement);

//load model let loader = new THREE.GLTFLoader(); loader.load(“./3d/glbxz.com-0007.gltf”, function (gltf) { scene.add(gltf.scene); console.log(gltf.scene); house = gltf.scene.children; // renderer.render(scene, camera); animate(); }); }

function animate() { requestAnimationFrame(animate); house.forEach((item) => { // item.rotation.z += 0.005; // item.rotation.x += 0.005; item.rotation.y += 0.05; });

renderer.render(scene, camera); }

function onWindowResize() { camera.aspect = container.clientWidth / container.clientHeight; camera.updateProjectionMatrix(); renderer.setSize(container.clientWidth, container.clientHeight); }

window.addEventListener(“resize”,onWindowResize) init();

style.css
```javascript
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    background: #757f9a;  /* fallback for old browsers */      background: -webkit-linear-gradient(to right, rgb(117, 127, 154), rgb(215, 221, 232));  /* Chrome 10-25, Safari 5.1-6 */      background: linear-gradient(to right, rgb(117, 127, 154), rgb(215, 221, 232)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */      
}
.scene,canvas{
    position: absolute;
    width: 100%;
    height: 100%;
}

实现效果

旋转
图片.png

Three.js入门 - 加载gltf 3D资源并展示旋转