threejs切换场景_threejs场景切换动画,threejs多场景切换资源-CSDN文库

共466个文件

js：458个

wasm：3个

jpg：2个

threejs

webgl

切换场景

需积分: 47 1.5k 浏览量 2022-07-29 21:42:59 上传评论 1 收藏 4MB 7Z 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

收起资源包目录

threejs 切换场景（466个子文件）

threejs画一个三角形-1三个场景得展示切换.html 10KB

kandao3.jpg 1.21MB

Up.jpg 230KB

web-ifc-api.js 1.42MB

three.module2.js 1.18MB

three.js 1.11MB

three.module.js 1.11MB

three.module1.js 1.11MB

OimoPhysics.js 1.08MB

three.min.js 599KB

echarts.min.js 530KB

RectAreaLightUniformsLib.js 306KB

jquery-3.6.0.js 282KB

mmdparser.module.js 155KB

chevrotain.module.min.js 154KB

rhino3dm.js 131KB

rhino3dm.module.js 131KB

opentype.module.min.js 124KB

GLTFLoader.js 98KB

FBXLoader.js 95KB

jquery-3.6.0.min.js 87KB

dat.gui.module.js 83KB

fflate.module.js 81KB

ColladaLoader.js 79KB

VRMLLoader.js 71KB

SVGLoader.js 63KB

GLTFExporter.js 58KB

EXRLoader.js 54KB

MMDLoader.js 50KB

SMAAPass.js 48KB

FXAAShader.js 45KB

ecsy.module.js 44KB

LDrawLoader.js 44KB

zstddec.module.js 42KB

TransformControls.js 40KB

MarchingCubes.js 39KB

Geometry.js 36KB

3MFLoader.js 34KB

LightningStrike.js 32KB

3DMLoader.js 30KB

lil-gui.module.min.js 28KB

MMDPhysics.js 28KB

Path.js 27KB

VTKLoader.js 27KB

RGBMLoader.js 26KB

IFFParser.js 26KB

CameraControls.js 26KB

OrbitControls.js 26KB

TDSLoader.js 25KB

MMDAnimationHelper.js 25KB

IFCLoader.js 23KB

LWOLoader.js 23KB

BufferGeometryUtils.js 23KB

ConvexHull.js 22KB

GeometryCompressionUtils.js 21KB

WebGPURenderer.js 21KB

meshopt_decoder.module.js 21KB

OBJLoader.js 21KB

Projector.js 20KB

OutlinePass.js 20KB

TeapotGeometry.js 19KB

BasisTextureLoader.js 19KB

SSRPass.js 18KB

WebGPUTextures.js 18KB

ColladaExporter.js 18KB

TrackballControls.js 17KB

WebGPURenderPipeline.js 17KB

NodeBuilder.js 16KB

SSRrPass.js 16KB

StandardNode.js 15KB

Tween.js 15KB

glslang.js 15KB

SMAAShader.js 14KB

TiltLoader.js 14KB

SimplexNoise.js 14KB

SAOPass.js 14KB

ConvexObjectBreaker.js 13KB

OutlineEffect.js 13KB

RollerCoaster.js 13KB

motion-controllers.module.js 13KB

Volume.js 13KB

NRRDLoader.js 13KB

DRACOLoader.js 13KB

SVGRenderer.js 12KB

UnrealBloomPass.js 12KB

MD2Loader.js 12KB

SSAOPass.js 12KB

RGBELoader.js 12KB

PLYExporter.js 12KB

USDZExporter.js 12KB

MD2CharacterComplex.js 12KB

SkeletonUtils.js 11KB

Water.js 11KB

PLYLoader.js 11KB

TGALoader.js 11KB

ProgressiveLightMap.js 11KB

GPUComputationRenderer.js 11KB

AMFLoader.js 11KB

ReflectorForSSRPass.js 10KB

MTLLoader.js 10KB

共 466 条

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ background-color: rgb(235, 235, 235); overflow: hidden; width: 100%; height: 100%; } #cj{ position: absolute; top: 2%; left: 3%; color: blueviolet; background-color: rgb(99, 178, 247); } #cj1{ position: absolute; top: 2%; left: 8%; color: blueviolet; background-color: rgb(99, 178, 247); } #cj2{ position: absolute; top: 2%; left: 13%; color: blueviolet; background-color: rgb(99, 178, 247); } </style> </head> <body> <div id="cj">场景1</div> <div id="cj1">场景2</div> <div id="cj2">场景3</div> <script src="../build/jquery-3.6.0.js"></script> <script src="../build/Tween.js"></script> <script type="module"> import * as THREE from '../build/three.module1.js'; import {OrbitControls} from './jsm/controls/OrbitControls.js'; let scene , camera , ambientLight , renderer , controls , axesHelper , geometry , material , color1 , color2 , color3 , Mesh , vertices let faces , plane , planegeometry , planematerial , planegeometry2 , planematerial2 , plane2 , planegeometry1 , planematerial1 , plane1 let Geometry3 , texture3 , materials3 , mesh3 , s = 0 , p = 1 let scene2 , camera2 , SceneShow = 1 let texture1 , texture2 , texture4 , scene4 , planegeometry4 , planematerial4 , plane4 function initScene(){ scene = new THREE.Scene(); texture1 = new THREE.TextureLoader().load("textures/kandao3.jpg") scene.background = texture1 axesHelper = new THREE.AxesHelper( 1 ); scene.add( axesHelper ); } function initCamera(){ camera = new THREE.PerspectiveCamera( 60 , window.innerWidth / window.innerHeight , 1 , 1000) camera.position.set(0,0,10); camera.lookAt(new THREE.Vector3(0,0,0)); camera.up.y = 1; } function initLight(){ ambientLight = new THREE.AmbientLight(0xffffff , 1.0) scene.add(ambientLight); } function initRender(){ renderer = new THREE.WebGLRenderer({antialias:true, alpha:true, side:THREE.DoubleSide}); renderer.setSize(window.innerWidth , window.innerHeight); document.body.appendChild(renderer.domElement); } function initControls(){ controls = new OrbitControls(camera, renderer.domElement) } function update(){ controls.update(); } function onWindowResize(){ camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth , window.innerHeight); } function initObject(){ geometry = new THREE.BufferGeometry(); vertices = new Float32Array([ 0 , 2 , 0 , -2 , 0 , 0 , 2 , 0 , 0 , 0 , 2 , 0 ]) color1 = new THREE.Color(0x334499); color2 = new THREE.Color(0x224433); color3 = new THREE.Color(0xff2288); geometry.setAttribute('position', new THREE.BufferAttribute(vertices , 3)); material = new THREE.MeshBasicMaterial({color : 0x33ff99}); var Mesh = new THREE.Line(geometry , material ); scene.add(Mesh); } function CreatePlane(){ planegeometry = new THREE.BoxGeometry(1,1,1); planematerial = new THREE.MeshBasicMaterial({ color : 0x335599, side : THREE.DoubleSide }) plane = new THREE.Mesh(planegeometry , planematerial); scene.add(plane); planegeometry1 = new THREE.BoxGeometry(1,1,1); planematerial1 = new THREE.MeshBasicMaterial({ color : 0x33ff99, side : THREE.DoubleSide }) plane1 = new THREE.Mesh(planegeometry , planematerial); plane1.position.set(2,2,0) scene.add(plane1); console.log(plane1) console.log(plane.matrix); //目前的矩阵数据 matrix--- Matrix4 [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] // plane.position.set(15 , 8 ,-10); // console.log(plane.matrix); //平移之后的矩阵数据 matrix---Matrix4 [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 15, 8, -10, 1] // plane.rotation.x = THREE.Math.degToRad(30); // console.log(plane.matrix); // [1, 0, 0, 0, 0, 0.8660254037844387, 0.49999999999999994, 0, 0, -0.49999999999999994, 0.8660254037844387, 0, 15, 8, -10, 1] } function CreatePlane2(){ scene2 = new THREE.Scene(); texture2 = new THREE.TextureLoader().load("textures/Up.jpg") scene2.background = texture2 planegeometry2 = new THREE.BoxGeometry(1,1,1); planematerial2 = new THREE.MeshBasicMaterial({ color : 0x99ff66, side : THREE.DoubleSide }) plane2 = new THREE.Mesh(planegeometry2 , planematerial2); plane2.position.set(0,0,0) scene2.add(plane2) // controls2 = new OrbitControls(camera, renderer.domElement) } function CreatePlane4(){ scene4 = new THREE.Scene(); texture4 = new THREE.TextureLoader().load("textures/sprite.png") scene4.background = texture4 planegeometry4 = new THREE.BoxGeometry(1,1,1); planematerial4 = new THREE.MeshBasicMaterial({ color : 0x9988ff, side : THREE.DoubleSide }) plane4 = new THREE.Mesh(planegeometry4 , planematerial4); plane4.position.set(0,0,0) scene4.add(plane4) // controls2 = new OrbitControls(camera, renderer.domElement) } function Switch(){ $('#cj').click(function(){ SceneShow = 1 // camera.position.set(1,1,1) // if(SceneShow === false){ // var tween = new TWEEN.Tween(camera.position) // .to({x:0,y:0,z:10},600) // .start(); // }else{ // // plane2.rotation.y = Math.PI // var tween = new TWEEN.Tween(camera.position) // .to({x:1,y:1,z:1},2000) // .start(); // // camera.position.set(1,1,1) // } }) $('#cj1').click(function(){ SceneShow = 2 }) $('#cj2').click(function(){ SceneShow = 3 }) } function init(){ initScene(); initCamera(); initLight(); initRender();