使用three.js渲染第一个场景和物体

一、效果图:

使用three.js渲染第一个场景和物体_第1张图片

二、渲染场景和物体的步骤

  1. 创建场景(Scene):在 three.js 中创建场景通过调用 THREE.Scene() 方法,然后将其赋值给变量。
var scene = new THREE.Scene(); 
  1. 创建相机(Camera):在 three.js 中创建相机通过调用 THREE.PerspectiveCamera() 方法,然后将其赋值给变量。需要设定相机的视角、宽高比、近截面和远截面。
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); 
camera.position.z = 5; // 设置相机位置,使物体置于相机前方
  1. 创建渲染器(Renderer):在 three.js 中创建渲染器通过调用 THREE.WebGLRenderer() 方法,然后将其赋值给变量。
var renderer = new THREE.WebGLRenderer(); 
renderer.setSize( window.innerWidth, window.innerHeight ); //设置渲染器大小
document.body.appendChild( renderer.domElement ); //将渲染器加入文档流
  1. 创建物体(Object):在 three.js 中创建物体可以通过多种方式,比如通过调用 THREE.BoxGeometry()方法创建立方体,调用 THREE.Mesh() 方法将几何体(Geometry)转换为网格(Mesh),并设置不同的材质(Material)。
var geometry = new THREE.BoxGeometry(1, 1, 1); // 创建立方体
var material = new THREE.MeshBasicMaterial( {color: 0xff0000} ); // 创建材质
var cube = new THREE.Mesh( geometry, material ); // 将几何体和材质传入Mesh生成物体实例
scene.add( cube ); // 将物体添加到场景中
  1. 渲染场景(Render):最后通过调用 THREE.Render() 方法将场景和相机传入进行渲染。
function animate() {
    requestAnimationFrame( animate ); //帧动画
    cube.rotation.x += 0.01; //旋转物体
    cube.rotation.y += 0.01; 
    renderer.render( scene, camera ); //渲染
}
animate();

三、完整代码如下

  • main.js
// 导入three
import * as THREE from 'three'

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

// 创建相机
// 参数:视野角度,长宽比,近平面,远平面
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

// 设置相机位置
// 参数:x轴,y轴,z轴
camera.position.set(0, 0, 5)

// 将相机添加到场景中
scene.add(camera)

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1)
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(geometry, material)
// 将物体添加到场景中
scene.add(cube)

// 创建渲染器
const renderer = new THREE.WebGLRenderer()
// 设置渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight)
console.log(renderer)
// 将渲染器添加到页面中
document.body.appendChild(renderer.domElement)

// 使用渲染器,通过相机渲染场景
function animate() {
    requestAnimationFrame( animate ); //帧动画
    cube.rotation.x += 0.01; //旋转物体
    cube.rotation.y += 0.01; 
    renderer.render( scene, camera ); //渲染
}
animate();

你可能感兴趣的:(three.js,javascript,数码相机,开发语言)