Three.js 学习记录创建一个简单的three.js实例-五八三

创建文件

基本文件结构

在文件夹里创建index.html
在index.html引入script.js
在index.html同层级创建script.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./script.js"></script>
</body>
</html>

three.js包

去官网下压缩包
- threejs.org/

解压进入build路径

选择three.min.js,在index.html引入

<body>
    <script src="./three.min.js"></script>
    <script src="./script.js"></script>
</body>

创建几何对象

const scene = new THREE.Scene(); // 创建scene

const geometry = new THREE.BoxGeometry(1, 1, 1); // 形状
const material = new THREE.MeshBasicMaterial({ color: 'red' }); // 颜色|材料
const mesh = new THREE.Mesh(geometry, material); // 物体信息，包括形状和材料
scene.add(mesh); // 物体加到scene

const sizes = {
    width: 800,
    height: 600
}

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height,);
camera.position.z = 3;
scene.add(camera); // 加相机

const canvas = document.querySelector('.webgl'); // 获取html里的canvas节点
const renderer = new THREE.WebGLRenderer({
    canvas,
}) // 加载渲染器

renderer.setSize(sizes.width, sizes.height); // 画布大小

renderer.render(scene,camera); // 实现渲染

效果：