微信小程序threejs開發
import?*?as?THREE?from?'three';
const?{
performance,
??document,
??window,
??HTMLCanvasElement,
??requestAnimationFrame,
??cancelAnimationFrame,
core,
??Event,
??Event0
}?=?THREE?.DHTML
import?Stats?from?'three/examples/jsm/libs/stats.module.js';
import?{?OrbitControls?}?from?'three/examples/jsm/controls/OrbitControls.js';
import?{?OrbitControls0?}?from?'three/examples/jsm/controls/OrbitControls0.js';
import?{?RoomEnvironment?}?from?'three/examples/jsm/environments/RoomEnvironment.js';
import?{?GLTFLoader?}?from?'three/examples/jsm/loaders/GLTFLoader.js';
import?{?DRACOLoader?}?from?'three/examples/jsm/loaders/DRACOLoader.js';
var?requestId
Page({
??onUnload()?{
????cancelAnimationFrame(requestId,?this.canvas)
????this.worker?&&?this.worker.terminate()
if(this.canvas)?this.canvas?=?null
????setTimeout(()?=>?{
??????if?(this.renderer?instanceof?THREE.WebGLRenderer)?{
????????this.renderer.dispose()
????????this.renderer.forceContextLoss()
????????this.renderer.context?=?null
????????this.renderer.domElement?=?null
????????this.renderer?=?null
??????}
????},?10)
??},
??webgl_touch(e){
????const?web_e?=?(window.platform=="devtools"?Event:Event0).fix(e)
????this.canvas.dispatchEvent(web_e)
??},
??onLoad()?{
????document.createElementAsync("canvas",?"webgl2",this).then(canvas?=>?{
??????this.canvas?=?canvas
??????this.body_load(canvas).then()
????})
??},
??async?body_load(canvas3d)?{
????let?mixer;
????const?clock?=?new?THREE.Clock();
????const?container?=?document.getElementById('container');
????const?stats?=?new?Stats();
????container.appendChild(stats.dom);
????const?renderer?=?new?THREE.WebGLRenderer(?{?antialias:?true?}?);
????renderer.setPixelRatio(?window.devicePixelRatio?);
????renderer.setSize(?window.innerWidth,?window.innerHeight?);
????container.appendChild(?renderer.domElement?);
????const?pmremGenerator?=?new?THREE.PMREMGenerator(?renderer?);
????const?scene?=?new?THREE.Scene();
????????var?AmbientLight?=?new?THREE.AmbientLight(0xffffff,1)
????scene.add(AmbientLight)
????///
????/*
??????????var?spotLight?=?new?THREE.SpotLight(0xaaaaaa,?1)?//聚光燈
????????spotLight.position.set(0,?0,?10)
????????spotLight.lookAt(scene.position)
????????scene.add(spotLight)*/
????//???
/*
????var?directionalLight?=?new?THREE.DirectionalLight(0xaaaaaa,?1)?//方向光
????directionalLight.position.set(0,?0,?10)
????directionalLight.lookAt(scene.position)
????scene.add(directionalLight)*/
????
????scene.background?=?new?THREE.Color(?0xbfe3dd?);
????scene.environment?=?pmremGenerator.fromScene(?new?RoomEnvironment(?renderer?),?0.04?).texture;
?
????const?camera?=?new?THREE.PerspectiveCamera(40,?window.innerWidth?/?window.innerHeight,?1,?100);
????camera.position.set(5,?2,?8);
????const?controls?=?new?(window.platform=="devtools"?OrbitControls:OrbitControls0)(camera,?renderer.domElement);
????controls.target.set(0,?0.5,?0);
????controls.update();
????controls.enablePan?=?true;
????controls.enableDamping?=?true;
????const?dracoLoader?=?this.dracoLoader?=?new?DRACOLoader();
????dracoLoader.setDecoderPath('jsm/libs/draco/gltf/');
????const?loader?=?new?GLTFLoader();
????loader.setDRACOLoader(dracoLoader);
????//loader.load('https://statics.jiuqianqu.com/btwc-file/20230222/1677055512471.glb',?function?(gltf)?{
????loader.load('models/gltf/LittlestTokyo.glb',?function?(gltf)?{
??????//console.error("xxxxxxx",gltf)
??????/*??gltf.scene.traverse(function?(child)?{
????????????if?(child.isMesh)?{
????????????????child.frustumCulled?=?false;
????????????????//模型陰影
????????????????child.castShadow?=?true;
????????????????//模型自發光
??????????????child.material.emissive?=?child.material.color;
????????????????child.material.emissiveMap?=?child.material.map;
????????????}
????????})*/
??????const?model?=?gltf.scene;
??????model.position.set(1,?1,?0);
??????model.scale.set(0.01,?0.01,?0.01);
??????scene.add(model);
??????mixer?=?new?THREE.AnimationMixer(model);
??????mixer.clipAction(gltf.animations[0]).play();
??????animate();
????},null,?function?(e)?{
??????console.error(e);
????});
?
????window.onresize?=?function?()?{
??????camera.aspect?=?window.innerWidth?/?window.innerHeight;
??????camera.updateProjectionMatrix();
??????renderer.setSize(window.innerWidth,?window.innerHeight);
????};
?
????function?animate()?{
??????requestId?=?requestAnimationFrame(animate);
??????const?delta?=?clock.getDelta();
??????mixer.update(delta);
??????controls.update();
??????//?//stats.update();
??????renderer.render(scene,?camera);
????}
??}
})
