1.实例演示
小程序集成Three.js,在场景中创建二维和三维几何体
2.源码
(1)引入three.js库文件
import * as THREE from '../../libs/three.weapp.js'
import {
OrbitControls
} from '../../jsm/controls/OrbitControls'
const app = getApp()
(2)在onLoad函数中初始化场景
onLoad: function () {
this.initScene();
},
intScene()函数
initScene() {
wx.createSelectorQuery()
.select('#webgl')
.node()
.exec((res) => {
let canvasId = String(res[0].node.id)
const canvas = THREE.global.registerCanvas(canvasId, res[0].node)
this.setData({
canvasId: canvasId
})
//相机
const camera = new THREE.PerspectiveCamera(70, canvas.width / canvas.height, 1, 1000);
//场景
scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
const renderer = new THREE.WebGLRenderer({
antialias: true
});
camera.position.set(30, 40, 50);
//控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.update();
//创建平面
const planeGeometry = new THREE.PlaneGeometry(20, 20, 40, 40);
const planeMaterial = new THREE.MeshBasicMaterial({
color: 0x69b70b,
});
planeMaterial.side = THREE.DoubleSide;
const plane = new THREE.Mesh(planeGeometry, planeMaterial)
plane.rotation.x = Math.PI / 2
plane.position.y = 0
scene.add(plane)
//创建二维圆面
const circleGeometry = new THREE.CircleGeometry(10, 20)
const circleMaterial = new THREE.MeshBasicMaterial({
color: 0xf30872,
side: THREE.DoubleSide
});
const circle = new THREE.Mesh(circleGeometry, circleMaterial);
circle.castShadow = true;
circle.rotation.x = Math.PI * 0.5
circle.position.y = 10
scene.add(circle);
//创建正方体
const cubeGeometry = new THREE.CubeGeometry(10, 10, 10)
const cubeMaterial = new THREE.MeshBasicMaterial({
color: 0xf30872,
side: THREE.DoubleSide
});
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
cube.position.y = -10
scene.add(cube)
//创建球体
const sphereGeometry = new THREE.SphereGeometry(5, 20, 20)
const sphereMaterial = new THREE.MeshBasicMaterial({
color: 0x341de0,
side: THREE.DoubleSide
})
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
sphere.position.z = 20
scene.add(sphere)
//圆柱体
const cylinderGeometry = new THREE.CylinderGeometry(8, 8, 20, 10, 10)
const cylinderMaterial = new THREE.MeshBasicMaterial({
color: 0xe1d11c,
side: THREE.DoubleSide
})
const cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial)
cylinder.position.z = -20
scene.add(cylinder)
//辅助线
const axesHelper = new THREE.AxesHelper(500);
scene.add(axesHelper)
renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio);
renderer.setSize(canvas.width, canvas.height);
function render() {
canvas.requestAnimationFrame(render);
//更新控制器
controls.update();
renderer.render(scene, camera);
}
render()
})
},
(3)源码说明
源码中创建了二维平面和圆面,三维正方体,球体和圆柱体。
3.实例演示小程序
场景演示->Three.js中的几何体