three.js（一）创建场景添加物体

目录

前言 

一、创建Three世界

1.导入Three.js

2.引入three

 3.创建基本结构

4.创建场景、相机、渲染器

场景

 相机

 渲染器

二、向场景中存放物体

1.创建一个物体

几何体

材质

网格模型

---

前言 

官方网站https://threejs.org/网站目录翻译

文档连接https://threejs.org/docs/index.html#manual/zh/introduction/Installation

文档支持中文，学习十分的方便

一、创建Three世界

1.导入Three.js

下载指定版本的three.js

npm install three@0.148.0 --save

或者使用sdk方式，在官网下载three然后找到three.js导入

根据需要选择方式

2.引入three

// 引入three.js
import * as THREE from 'three';

 3.创建基本结构

<template lang="">
   
</template>
<script>
import * as THREE from 'three';

export default {
    
    data() {

    },
    mounted() {
       
    },
    methods: {
       
    },
}
</script>
<style lang="">
    
</style>

4.创建场景、相机、渲染器

场景

存放三维物体的容器

// 创建3D场景对象Scene
const scene = new THREE.Scene();

 相机

观测场景的方式

// 实例化一个透视投影相机对象
// 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
//相机在Three.js三维坐标系中的位置
camera.position.set(200, 200, 200); 
//相机观察目标指向Threejs 3D空间中某个位置
camera.lookAt(0, 0, 0); //坐标原点

 渲染器

将三维场景在浏览器展示的画布

// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();

// 定义threejs输出画布的尺寸(单位:像素px)
const width = 800; //宽度
const height = 500; //高度

//通过.setSize()方法改变画布的大小
renderer.setSize(width, height);

//执行渲染操作，场景发生变化后都要执行一次渲染
renderer.render(scene, camera);

 三大基本组件创建完成后让场景绑定到DOM元素上

//渲染器WebGLRenderer通过属性.domElement可以获得渲染方法.render()生成的Canvas画布

document.body.appendChild(renderer.domElement);

 添加html节点用于绑定渲染器的Canvas画布

<div id="webgl"></div>

通过appendChild方法在指定元素下添加一个子节点

document.getElementById('webgl').appendChild(renderer.domElement);

至此场景就被创建成功了，运行代码后依旧啥都看不见是因为我们的场景中没有任何物体

二、向场景中存放物体

1.创建一个物体

创建一个物体也有三个要素

物体三要素

	物体形状：几何体		物体外观：材质			物体本体：网格模型

几何体

//创建一个长方体几何对象Geometry
const geometry = new THREE.BoxGeometry(100, 100, 100); 

材质

//创建一个材质对象Material
const material = new THREE.MeshBasicMaterial({
    color: 0xff0000,//0xff0000设置材质颜色为红色
}); 

网格模型

const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
//设置网格模型在三维空间中的位置坐标，默认是坐标原点
mesh.position.set(0,10,0);
scene.add(mesh); 

到此页面会加载一个红色的方块，就表明创建物体成功了