携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情 >

ThreeJS入门

加载模型需要具备的元素:

相机(camera),相当于观察模型的眼睛,在一个场景中至少有一个相机,相机种类多样,一般采用透视相机(PerspectiveCamera),可以体现近大远小真实的视觉效果;
场景(scene),用于承载模型的画布;
渲染器(renderer),在页面中对场景相机进行渲染;

实现页面模型的简单加载:

script.js

//引入线上包 @v0.126.0为版本号
import * as THREE from 'https://cdn.skypack.dev/three@v0.126.0';
import { OrbitControls } from 'https://cdn.skypack.dev/three@v0.126.0/examples/jsm/controls/OrbitControls.js';

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

// mesh - red cube
// 2.创建模型形状
const geometry = new THREE.BoxGeometry(1, 1, 1)
// 3.创建模型材质
const material = new THREE.MeshBasicMaterial({ color: '#ff0000' })
// 4.创建模型
const mesh = new THREE.Mesh(geometry, material)
// 5.将模型添加至场景中
scene.add(mesh)

// Sizes 画布的长宽设置
const size = {
    width: 800,
    height: 600
}

// Camera  透视相机-近大远小
// 6.创建相机(其中相机参数为可视域角度,可视域比例)
const camera = new THREE.PerspectiveCamera(75, size.width / size.height)
// 7.为相机设置位置,默认情况下相机在中心位置且只能看见构成三角形面片的一个棱边,如果不设置的话相机看到的场景就是一片漆黑
camera.position.z = 3;
// 8.将相机添加至场景中
scene.add(camera)

// 9.选中承载模型的canvas
const canvas = document.querySelector('.demo1');
// Render
// 10.创建渲染器
const renderer = new THREE.WebGLRenderer({
    canvas,
})
// 11.为渲染器设置尺寸
renderer.setSize(size.width, size.height)
// 12.通过渲染器渲染场景及相机(初见效果,非正式步骤)
renderer.render(scene, camera)
// 此时可在canvas中看见一个单一的正方形,如图1,旋转模型也无什么反应与变化,主要原因为我们没有对他轨道控制实时渲染,再每一次requestAnimationFrame时添加轨道控制更新

// 12.获取轨道控制器
let  controls= new OrbitControls( camera, renderer.domElement )
// 13.每次页面渲染时执行函数
function animate (){
    // 更新轨道控制 实现鼠标可操控
    controls.update();
    // 场景渲染
    renderer.render(scene, camera)
    // 页面渲染,循环调用
    // requestAnimationFrame 浏览器自带，一般每秒60帧,在dom不可见时不进行重绘/回流
    requestAnimationFrame(animate)
}
// 触发方法
animate()
// 实际效果如图二,可通过鼠标自由旋转拖动缩放

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>three-dimensional-world</title>
</head>
<body>
<canvas class="demo1"></canvas>
</body>
<script src="./script.js" type="module"></script>
</html>

图1

图2

如果有哪里描述不准确或者有问题,欢迎大佬指正!
(≖ᴗ≖)✧

threejs初体验----(1)

ThreeJS入门

加载模型需要具备的元素:

实现页面模型的简单加载: