前言

Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。

一个典型的 Three.js 程序至少要包括渲染器（Renderer）、场景（Scene）、照相机（Camera），以及你在场景中创建的物体。

Three.js相关文档：http://docs.thingjs.com/

一、Three.js的使用

安装第三方包：npm i --save threejs-miniprogram

1.正方体的绘制

<view style="display:inline-block;"><button size="mini" type="primary" class="btn" data-action="Walking" bindtap="play">走</button><button size="mini" type="primary" class="btn"  data-action="WalkJump" bindtap="play">跳</button><button size="mini" type="primary" class="btn"  data-action="Sitting" bindtap="play">坐</button><button size="mini" type="primary" class="btn"  data-action="Standing" bindtap="play">站</button>
</view>
<canvastype="webgl"id="webgl"style="width: 100%; height: 450px;"bindtouchstart="touchStart"bindtouchmove="touchMove"bindtouchend="touchEnd"
></canvas>

import { createScopedThreejs } from 'threejs-miniprogram'
const { renderCube } = require('../../../lib/test-cases/cube')const app = getApp()Page({data: {},onLoad: function () {wx.createSelectorQuery().select('#webgl').node().exec((res) => {const canvas = res[0].nodethis.canvas = canvasconst THREE = createScopedThreejs(canvas)renderCube(canvas, THREE)})},play(e){let action = e.currentTarget.dataset.actionthis.fadeToAction(action)},touchStart(e) {this.canvas.dispatchTouchEvent({...e, type:'touchstart'})},touchMove(e) {this.canvas.dispatchTouchEvent({...e, type:'touchmove'})},touchEnd(e) {this.canvas.dispatchTouchEvent({...e, type:'touchend'})}
})

二、正方体相关js文件

import registerOrbit from "./orbit"export function renderCube(canvas, THREE) {var camera, scene, renderer,controls;var mesh;init();// animate();function init() {camera = new THREE.PerspectiveCamera(70, canvas.width / canvas.height, 1, 1000);camera.position.z = 400;scene = new THREE.Scene();var texture = new THREE.TextureLoader().load('/static/cubetexture.png');var geometry = new THREE.BoxBufferGeometry(200, 200, 200);var material = new THREE.MeshBasicMaterial({ map: texture });mesh = new THREE.Mesh(geometry, material);scene.add(mesh);renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio);renderer.setSize(canvas.width, canvas.height);renderer.render(scene, camera);// 控制鼠标拖拽的const { OrbitControls } = registerOrbit(THREE)controls = new OrbitControls( camera, renderer.domElement );// camera.position.set( 5, 5, 10 );controls.update();// renderer.render(scene, camera);animate()}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(canvas.width, canvas.height);}function animate() {canvas.requestAnimationFrame(animate);// mesh.rotation.x += 0.005;// mesh.rotation.y += 0.01;controls.update();renderer.render(scene, camera);}
}

/*** @author qiao / https://github.com/qiao* @author mrdoob / http://mrdoob.com* @author alteredq / http://alteredqualia.com/* @author WestLangley / http://github.com/WestLangley* @author erich666 / http://erichaines.com* @author ScieCode / http://github.com/sciecode*/const registerOrbit = (THREE) => {const {EventDispatcher,MOUSE,Quaternion,Spherical,TOUCH,Vector2,Vector3} = THREE// This set of controls performs orbiting, dollying (zooming), and panning.// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).////    Orbit - left mouse / touch: one-finger move//    Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish//    Pan - right mouse, or left mouse + ctrl/meta/shiftKey, or arrow keys / touch: two-finger movevar OrbitControls = function (object, domElement) {if (domElement === undefined) console.warn('THREE.OrbitControls: The second parameter "domElement" is now mandatory.');if (domElement === document) console.error('THREE.OrbitControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.');this.object = object;this.domElement = domElement;// Set to false to disable this controlthis.enabled = true;// "target" sets the location of focus, where the object orbits aroundthis.target = new Vector3();// How far you can dolly in and out ( PerspectiveCamera only )this.minDistance = 0;this.maxDistance = Infinity;// How far you can zoom in and out ( OrthographicCamera only )this.minZoom = 0;this.maxZoom = Infinity;// How far you can orbit vertically, upper and lower limits.// Range is 0 to Math.PI radians.this.minPolarAngle = 0; // radiansthis.maxPolarAngle = Math.PI; // radians// How far you can orbit horizontally, upper and lower limits.// If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].this.minAzimuthAngle = -Infinity; // radiansthis.maxAzimuthAngle = Infinity; // radians// Set to true to enable damping (inertia)// If damping is enabled, you must call controls.update() in your animation loopthis.enableDamping = false;this.dampingFactor = 0.05;// This option actually enables dollying in and out; left as "zoom" for backwards compatibility.// Set to false to disable zoomingthis.enableZoom = true;this.zoomSpeed = 1.0;// Set to false to disable rotatingthis.enableRotate = true;this.rotateSpeed = 1.0;// Set to false to disable panningthis.enablePan = true;this.panSpeed = 1.0;this.screenSpacePanning = false; // if true, pan in screen-spacethis.keyPanSpeed = 7.0; // pixels moved per arrow key push// Set to true to automatically rotate around the target// If auto-rotate is enabled, you must call controls.update() in your animation loopthis.autoRotate = false;this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60// Set to false to disable use of the keysthis.enableKeys = true;// The four arrow keysthis.keys = {LEFT: 37,UP: 38,RIGHT: 39,BOTTOM: 40};// Mouse buttonsthis.mouseButtons = {LEFT: MOUSE.ROTATE,MIDDLE: MOUSE.DOLLY,RIGHT: MOUSE.PAN};// Touch fingersthis.touches = {ONE: TOUCH.ROTATE,TWO: TOUCH.DOLLY_PAN};// for resetthis.target0 = this.target.clone();this.position0 = this.object.position.clone();this.zoom0 = this.object.zoom;//// public methods//this.getPolarAngle = function () {return spherical.phi;};this.getAzimuthalAngle = function () {return spherical.theta;};this.saveState = function () {scope.target0.copy(scope.target);scope.position0.copy(scope.object.position);scope.zoom0 = scope.object.zoom;};this.reset = function () {scope.target.copy(scope.target0);scope.object.position.copy(scope.position0);scope.object.zoom = scope.zoom0;scope.object.updateProjectionMatrix();scope.dispatchEvent(changeEvent);scope.update();state = STATE.NONE;};// this method is exposed, but perhaps it would be better if we can make it private...this.update = function () {var offset = new Vector3();// so camera.up is the orbit axisvar quat = new Quaternion().setFromUnitVectors(object.up, new Vector3(0, 1, 0));var quatInverse = quat.clone().inverse();var lastPosition = new Vector3();var lastQuaternion = new Quaternion();return function update() {var position = scope.object.position;offset.copy(position).sub(scope.target);// rotate offset to "y-axis-is-up" spaceoffset.applyQuaternion(quat);// angle from z-axis around y-axisspherical.setFromVector3(offset);if (scope.autoRotate && state === STATE.NONE) {rotateLeft(getAutoRotationAngle());}if (scope.enableDamping) {spherical.theta += sphericalDelta.theta * scope.dampingFactor;spherical.phi += sphericalDelta.phi * scope.dampingFactor;} else {spherical.theta += sphericalDelta.theta;spherical.phi += sphericalDelta.phi;}// restrict theta to be between desired limitsspherical.theta = Math.max(scope.minAzimuthAngle, Math.min(scope.maxAzimuthAngle, spherical.theta));// restrict phi to be between desired limitsspherical.phi = Math.max(scope.minPolarAngle, Math.min(scope.maxPolarAngle, spherical.phi));spherical.makeSafe();spherical.radius *= scale;// restrict radius to be between desired limitsspherical.radius = Math.max(scope.minDistance, Math.min(scope.maxDistance, spherical.radius));// move target to panned locationif (scope.enableDamping === true) {scope.target.addScaledVector(panOffset, scope.dampingFactor);} else {scope.target.add(panOffset);}offset.setFromSpherical(spherical);// rotate offset back to "camera-up-vector-is-up" spaceoffset.applyQuaternion(quatInverse);position.copy(scope.target).add(offset);scope.object.lookAt(scope.target);if (scope.enableDamping === true) {sphericalDelta.theta *= (1 - scope.dampingFactor);sphericalDelta.phi *= (1 - scope.dampingFactor);panOffset.multiplyScalar(1 - scope.dampingFactor);} else {sphericalDelta.set(0, 0, 0);panOffset.set(0, 0, 0);}scale = 1;// update condition is:// min(camera displacement, camera rotation in radians)^2 > EPS// using small-angle approximation cos(x/2) = 1 - x^2 / 8if (zoomChanged ||lastPosition.distanceToSquared(scope.object.position) > EPS ||8 * (1 - lastQuaternion.dot(scope.object.quaternion)) > EPS) {scope.dispatchEvent(changeEvent);lastPosition.copy(scope.object.position);lastQuaternion.copy(scope.object.quaternion);zoomChanged = false;return true;}return false;};}();this.dispose = function () {scope.domElement.removeEventListener('contextmenu', onContextMenu, false);scope.domElement.removeEventListener('mousedown', onMouseDown, false);scope.domElement.removeEventListener('wheel', onMouseWheel, false);scope.domElement.removeEventListener('touchstart', onTouchStart, false);scope.domElement.removeEventListener('touchend', onTouchEnd, false);scope.domElement.removeEventListener('touchmove', onTouchMove, false);document.removeEventListener('mousemove', onMouseMove, false);document.removeEventListener('mouseup', onMouseUp, false);scope.domElement.removeEventListener('keydown', onKeyDown, false);//scope.dispatchEvent( { type: 'dispose' } ); // should this be added here?};//// internals//var scope = this;var changeEvent = {type: 'change'};var startEvent = {type: 'start'};var endEvent = {type: 'end'};var STATE = {NONE: -1,ROTATE: 0,DOLLY: 1,PAN: 2,TOUCH_ROTATE: 3,TOUCH_PAN: 4,TOUCH_DOLLY_PAN: 5,TOUCH_DOLLY_ROTATE: 6};var state = STATE.NONE;var EPS = 0.000001;// current position in spherical coordinatesvar spherical = new Spherical();var sphericalDelta = new Spherical();var scale = 1;var panOffset = new Vector3();var zoomChanged = false;var rotateStart = new Vector2();var rotateEnd = new Vector2();var rotateDelta = new Vector2();var panStart = new Vector2();var panEnd = new Vector2();var panDelta = new Vector2();var dollyStart = new Vector2();var dollyEnd = new Vector2();var dollyDelta = new Vector2();function getAutoRotationAngle() {return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;}function getZoomScale() {return Math.pow(0.95, scope.zoomSpeed);}function rotateLeft(angle) {sphericalDelta.theta -= angle;}function rotateUp(angle) {sphericalDelta.phi -= angle;}var panLeft = function () {var v = new Vector3();return function panLeft(distance, objectMatrix) {v.setFromMatrixColumn(objectMatrix, 0); // get X column of objectMatrixv.multiplyScalar(-distance);panOffset.add(v);};}();var panUp = function () {var v = new Vector3();return function panUp(distance, objectMatrix) {if (scope.screenSpacePanning === true) {v.setFromMatrixColumn(objectMatrix, 1);} else {v.setFromMatrixColumn(objectMatrix, 0);v.crossVectors(scope.object.up, v);}v.multiplyScalar(distance);panOffset.add(v);};}();// deltaX and deltaY are in pixels; right and down are positivevar pan = function () {var offset = new Vector3();return function pan(deltaX, deltaY) {var element = scope.domElement;if (scope.object.isPerspectiveCamera) {// perspectivevar position = scope.object.position;offset.copy(position).sub(scope.target);var targetDistance = offset.length();// half of the fov is center to top of screentargetDistance *= Math.tan((scope.object.fov / 2) * Math.PI / 180.0);// we use only clientHeight here so aspect ratio does not distort speedpanLeft(2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix);panUp(2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix);} else if (scope.object.isOrthographicCamera) {// orthographicpanLeft(deltaX * (scope.object.right - scope.object.left) / scope.object.zoom / element.clientWidth, scope.object.matrix);panUp(deltaY * (scope.object.top - scope.object.bottom) / scope.object.zoom / element.clientHeight, scope.object.matrix);} else {// camera neither orthographic nor perspectiveconsole.warn('WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.');scope.enablePan = false;}};}();function dollyOut(dollyScale) {if (scope.object.isPerspectiveCamera) {scale /= dollyScale;} else if (scope.object.isOrthographicCamera) {scope.object.zoom = Math.max(scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom * dollyScale));scope.object.updateProjectionMatrix();zoomChanged = true;} else {console.warn('WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.');scope.enableZoom = false;}}function dollyIn(dollyScale) {if (scope.object.isPerspectiveCamera) {scale *= dollyScale;} else if (scope.object.isOrthographicCamera) {scope.object.zoom = Math.max(scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom / dollyScale));scope.object.updateProjectionMatrix();zoomChanged = true;} else {console.warn('WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.');scope.enableZoom = false;}}//// event callbacks - update the object state//function handleMouseDownRotate(event) {rotateStart.set(event.clientX, event.clientY);}function handleMouseDownDolly(event) {dollyStart.set(event.clientX, event.clientY);}function handleMouseDownPan(event) {panStart.set(event.clientX, event.clientY);}function handleMouseMoveRotate(event) {rotateEnd.set(event.clientX, event.clientY);rotateDelta.subVectors(rotateEnd, rotateStart).multiplyScalar(scope.rotateSpeed);var element = scope.domElement;rotateLeft(2 * Math.PI * rotateDelta.x / element.clientHeight); // yes, heightrotateUp(2 * Math.PI * rotateDelta.y / element.clientHeight);rotateStart.copy(rotateEnd);scope.update();}function handleMouseMoveDolly(event) {dollyEnd.set(event.clientX, event.clientY);dollyDelta.subVectors(dollyEnd, dollyStart);if (dollyDelta.y > 0) {dollyOut(getZoomScale());} else if (dollyDelta.y < 0) {dollyIn(getZoomScale());}dollyStart.copy(dollyEnd);scope.update();}function handleMouseMovePan(event) {panEnd.set(event.clientX, event.clientY);panDelta.subVectors(panEnd, panStart).multiplyScalar(scope.panSpeed);pan(panDelta.x, panDelta.y);panStart.copy(panEnd);scope.update();}function handleMouseUp( /*event*/ ) {// no-op}function handleMouseWheel(event) {if (event.deltaY < 0) {dollyIn(getZoomScale());} else if (event.deltaY > 0) {dollyOut(getZoomScale());}scope.update();}function handleKeyDown(event) {var needsUpdate = false;switch (event.keyCode) {case scope.keys.UP:pan(0, scope.keyPanSpeed);needsUpdate = true;break;case scope.keys.BOTTOM:pan(0, -scope.keyPanSpeed);needsUpdate = true;break;case scope.keys.LEFT:pan(scope.keyPanSpeed, 0);needsUpdate = true;break;case scope.keys.RIGHT:pan(-scope.keyPanSpeed, 0);needsUpdate = true;break;}if (needsUpdate) {// prevent the browser from scrolling on cursor keysevent.preventDefault();scope.update();}}function handleTouchStartRotate(event) {if (event.touches.length == 1) {rotateStart.set(event.touches[0].pageX, event.touches[0].pageY);} else {var x = 0.5 * (event.touches[0].pageX + event.touches[1].pageX);var y = 0.5 * (event.touches[0].pageY + event.touches[1].pageY);rotateStart.set(x, y);}}function handleTouchStartPan(event) {if (event.touches.length == 1) {panStart.set(event.touches[0].pageX, event.touches[0].pageY);} else {var x = 0.5 * (event.touches[0].pageX + event.touches[1].pageX);var y = 0.5 * (event.touches[0].pageY + event.touches[1].pageY);panStart.set(x, y);}}function handleTouchStartDolly(event) {var dx = event.touches[0].pageX - event.touches[1].pageX;var dy = event.touches[0].pageY - event.touches[1].pageY;var distance = Math.sqrt(dx * dx + dy * dy);dollyStart.set(0, distance);}function handleTouchStartDollyPan(event) {if (scope.enableZoom) handleTouchStartDolly(event);if (scope.enablePan) handleTouchStartPan(event);}function handleTouchStartDollyRotate(event) {if (scope.enableZoom) handleTouchStartDolly(event);if (scope.enableRotate) handleTouchStartRotate(event);}function handleTouchMoveRotate(event) {if (event.touches.length == 1) {rotateEnd.set(event.touches[0].pageX, event.touches[0].pageY);} else {var x = 0.5 * (event.touches[0].pageX + event.touches[1].pageX);var y = 0.5 * (event.touches[0].pageY + event.touches[1].pageY);rotateEnd.set(x, y);}rotateDelta.subVectors(rotateEnd, rotateStart).multiplyScalar(scope.rotateSpeed);var element = scope.domElement;rotateLeft(2 * Math.PI * rotateDelta.x / element.clientHeight); // yes, heightrotateUp(2 * Math.PI * rotateDelta.y / element.clientHeight);rotateStart.copy(rotateEnd);}function handleTouchMovePan(event) {if (event.touches.length == 1) {panEnd.set(event.touches[0].pageX, event.touches[0].pageY);} else {var x = 0.5 * (event.touches[0].pageX + event.touches[1].pageX);var y = 0.5 * (event.touches[0].pageY + event.touches[1].pageY);panEnd.set(x, y);}panDelta.subVectors(panEnd, panStart).multiplyScalar(scope.panSpeed);pan(panDelta.x, panDelta.y);panStart.copy(panEnd);}function handleTouchMoveDolly(event) {var dx = event.touches[0].pageX - event.touches[1].pageX;var dy = event.touches[0].pageY - event.touches[1].pageY;var distance = Math.sqrt(dx * dx + dy * dy);dollyEnd.set(0, distance);dollyDelta.set(0, Math.pow(dollyEnd.y / dollyStart.y, scope.zoomSpeed));dollyOut(dollyDelta.y);dollyStart.copy(dollyEnd);}function handleTouchMoveDollyPan(event) {if (scope.enableZoom) handleTouchMoveDolly(event);if (scope.enablePan) handleTouchMovePan(event);}function handleTouchMoveDollyRotate(event) {if (scope.enableZoom) handleTouchMoveDolly(event);if (scope.enableRotate) handleTouchMoveRotate(event);}function handleTouchEnd( /*event*/ ) {// no-op}//// event handlers - FSM: listen for events and reset state//function onMouseDown(event) {if (scope.enabled === false) return;// Prevent the browser from scrolling.event.preventDefault();// Manually set the focus since calling preventDefault above// prevents the browser from setting it automatically.scope.domElement.focus ? scope.domElement.focus() : window.focus();var mouseAction;switch (event.button) {case 0:mouseAction = scope.mouseButtons.LEFT;break;case 1:mouseAction = scope.mouseButtons.MIDDLE;break;case 2:mouseAction = scope.mouseButtons.RIGHT;break;default:mouseAction = -1;}switch (mouseAction) {case MOUSE.DOLLY:if (scope.enableZoom === false) return;handleMouseDownDolly(event);state = STATE.DOLLY;break;case MOUSE.ROTATE:if (event.ctrlKey || event.metaKey || event.shiftKey) {if (scope.enablePan === false) return;handleMouseDownPan(event);state = STATE.PAN;} else {if (scope.enableRotate === false) return;handleMouseDownRotate(event);state = STATE.ROTATE;}break;case MOUSE.PAN:if (event.ctrlKey || event.metaKey || event.shiftKey) {if (scope.enableRotate === false) return;handleMouseDownRotate(event);state = STATE.ROTATE;} else {if (scope.enablePan === false) return;handleMouseDownPan(event);state = STATE.PAN;}break;default:state = STATE.NONE;}if (state !== STATE.NONE) {document.addEventListener('mousemove', onMouseMove, false);document.addEventListener('mouseup', onMouseUp, false);scope.dispatchEvent(startEvent);}}function onMouseMove(event) {if (scope.enabled === false) return;event.preventDefault();switch (state) {case STATE.ROTATE:if (scope.enableRotate === false) return;handleMouseMoveRotate(event);break;case STATE.DOLLY:if (scope.enableZoom === false) return;handleMouseMoveDolly(event);break;case STATE.PAN:if (scope.enablePan === false) return;handleMouseMovePan(event);break;}}function onMouseUp(event) {if (scope.enabled === false) return;handleMouseUp(event);document.removeEventListener('mousemove', onMouseMove, false);document.removeEventListener('mouseup', onMouseUp, false);scope.dispatchEvent(endEvent);state = STATE.NONE;}function onMouseWheel(event) {if (scope.enabled === false || scope.enableZoom === false || (state !== STATE.NONE && state !== STATE.ROTATE)) return;event.preventDefault();event.stopPropagation();scope.dispatchEvent(startEvent);handleMouseWheel(event);scope.dispatchEvent(endEvent);}function onKeyDown(event) {if (scope.enabled === false || scope.enableKeys === false || scope.enablePan === false) return;handleKeyDown(event);}function onTouchStart(event) {if (scope.enabled === false) return;event.preventDefault(); // prevent scrollingswitch (event.touches.length) {case 1:switch (scope.touches.ONE) {case TOUCH.ROTATE:if (scope.enableRotate === false) return;handleTouchStartRotate(event);state = STATE.TOUCH_ROTATE;break;case TOUCH.PAN:if (scope.enablePan === false) return;handleTouchStartPan(event);state = STATE.TOUCH_PAN;break;default:state = STATE.NONE;}break;case 2:switch (scope.touches.TWO) {case TOUCH.DOLLY_PAN:if (scope.enableZoom === false && scope.enablePan === false) return;handleTouchStartDollyPan(event);state = STATE.TOUCH_DOLLY_PAN;break;case TOUCH.DOLLY_ROTATE:if (scope.enableZoom === false && scope.enableRotate === false) return;handleTouchStartDollyRotate(event);state = STATE.TOUCH_DOLLY_ROTATE;break;default:state = STATE.NONE;}break;default:state = STATE.NONE;}if (state !== STATE.NONE) {scope.dispatchEvent(startEvent);}}function onTouchMove(event) {if (scope.enabled === false) return;event.preventDefault(); // prevent scrollingevent.stopPropagation();switch (state) {case STATE.TOUCH_ROTATE:if (scope.enableRotate === false) return;handleTouchMoveRotate(event);scope.update();break;case STATE.TOUCH_PAN:if (scope.enablePan === false) return;handleTouchMovePan(event);scope.update();break;case STATE.TOUCH_DOLLY_PAN:if (scope.enableZoom === false && scope.enablePan === false) return;handleTouchMoveDollyPan(event);scope.update();break;case STATE.TOUCH_DOLLY_ROTATE:if (scope.enableZoom === false && scope.enableRotate === false) return;handleTouchMoveDollyRotate(event);scope.update();break;default:state = STATE.NONE;}}function onTouchEnd(event) {if (scope.enabled === false) return;handleTouchEnd(event);scope.dispatchEvent(endEvent);state = STATE.NONE;}function onContextMenu(event) {if (scope.enabled === false) return;event.preventDefault();}//scope.domElement.addEventListener('contextmenu', onContextMenu, false);scope.domElement.addEventListener('mousedown', onMouseDown, false);scope.domElement.addEventListener('wheel', onMouseWheel, false);scope.domElement.addEventListener('touchstart', onTouchStart, false);scope.domElement.addEventListener('touchend', onTouchEnd, false);scope.domElement.addEventListener('touchmove', onTouchMove, false);scope.domElement.addEventListener('keydown', onKeyDown, false);// make sure element can receive keys.if (scope.domElement.tabIndex === -1) {scope.domElement.tabIndex = 0;}// force an update at startthis.update();};OrbitControls.prototype = Object.create(EventDispatcher.prototype);OrbitControls.prototype.constructor = OrbitControls;// This set of controls performs orbiting, dollying (zooming), and panning.// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).// This is very similar to OrbitControls, another set of touch behavior////    Orbit - right mouse, or left mouse + ctrl/meta/shiftKey / touch: two-finger rotate//    Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish//    Pan - left mouse, or arrow keys / touch: one-finger movevar MapControls = function (object, domElement) {OrbitControls.call(this, object, domElement);this.mouseButtons.LEFT = MOUSE.PAN;this.mouseButtons.RIGHT = MOUSE.ROTATE;this.touches.ONE = TOUCH.PAN;this.touches.TWO = TOUCH.DOLLY_ROTATE;};MapControls.prototype = Object.create(EventDispatcher.prototype);MapControls.prototype.constructor = MapControls;return {OrbitControls,MapControls}
}export default registerOrbit

三、效果图

四、总结

three.js画一个图形主要经历如下八个步骤：

1.创建透视相机
2.创建场景
3.创建光源
4.构造辅助网格
5.创建加载器，加载模型文件
6.创建渲染器，渲染场景
7.创建控制器
8.循环渲染场景

【愚公系列】2022年09月微信小程序-three.js绘制正方体相关推荐

【愚公系列】2022年09月微信小程序-three.js绘制多维旋转正方体
文章目录前言一.Three.js的使用 1.多维旋转正方体的绘制二.多维旋转正方体相关js文件三.效果图四.总结前言 Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各 ...
【愚公系列】2022年09月微信小程序-three.js绘制球体
文章目录前言一.Three.js的使用 1.球体的绘制二.球体相关js文件三.效果图四.总结前言 Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄 ...
【愚公系列】2022年09月微信小程序-微信小程序实现网页一键登录功能
文章目录前言一.微信小程序实现网页一键登录功能 1.旧版登录方法 2.新版登录方法二.相关第三方包源码前言如果微信小程序要获取微信登录的用户信息,需要拿到code去后台换取用户信息,具体步骤 ...
【愚公系列】2022年09月微信小程序-webview内嵌网页的授权认证
文章目录前言一.webview内嵌网页的授权认证 1.内嵌页面 2.登录页面二.web端相关函数 1.判断是否是小程序环境前言随着微信小程序的广泛应用,小程序的用户越来越多,但受其小程序体积 ...
【愚公系列】2022年09月微信小程序-图片加载和全屏适配问题
文章目录前言一.图片加载二.适配机型实现全屏背景图前言在使用图片问题中可能会遇到各种各样的问题,比如图片加载不出来,图片显示在不同机型效果不同,图片加载展示问题等等. 微信小程序image相 ...
【愚公系列】2022年09月微信小程序-自定义导航栏功能的实现
文章目录前言一.自定义导航栏功能的实现 1.组件的封装 2.使用前言导航栏是指位于页面顶部或者侧边区域的,在页眉横幅图片上边或下边的一排水平导航按钮,它起着链接站点或者软件内的各个页面的作用. ...
【愚公系列】2022年09月微信小程序-Page页面扩展
文章目录前言一.Page页面扩展 1.组件的封装和引用 2.页面使用 3.效果二.其他相关封装 1.pop-up组件 2.LoginPanel组件 3.LoginPanel组件前言在小程序日 ...
【愚公系列】2022年09月微信小程序-图片懒加载功能实现
文章目录前言一.官方图片的懒加载 1.wxml 2.js 3.css 4.效果二.第三方包实现图片的懒加载 1.安装第三方包 2.组件引用 3.wxml 4.js 5.css 6.效果前言大 ...
【愚公系列】2022年09月微信小程序-WebGL立体图形的绘制
文章目录前言一.webgl的使用 1.立体图形的绘制二.相关包源码三.总结前言 WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaS ...

【愚公系列】2022年09月微信小程序-three.js绘制正方体

文章目录

前言

一、Three.js的使用

1.正方体的绘制

二、正方体相关js文件

三、效果图

四、总结

【愚公系列】2022年09月微信小程序-three.js绘制正方体相关推荐

最新文章

热门文章

【愚公系列】2022年09月 微信小程序-three.js绘制正方体

文章目录

前言

一、Three.js的使用

1.正方体的绘制

二、正方体相关js文件

三、效果图

四、总结

【愚公系列】2022年09月 微信小程序-three.js绘制正方体相关推荐

最新文章

热门文章

【愚公系列】2022年09月微信小程序-three.js绘制正方体

【愚公系列】2022年09月微信小程序-three.js绘制正方体相关推荐