From 2e528258d43c4e197d6485cc55a90a4daa2dbead Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Sun, 2 Jul 2023 14:23:17 -0400 Subject: [PATCH] Update --- .../examples/misc_controls_fly.ts | 263 --------- .../examples/misc_exporter_gltf.ts | 539 ------------------ .../examples/misc_exporter_ply.ts | 163 ------ .../examples/physics_rapier_instancing.ts | 139 ----- examples-testing/index.js | 11 +- 5 files changed, 7 insertions(+), 1108 deletions(-) delete mode 100644 examples-testing/examples/misc_controls_fly.ts delete mode 100644 examples-testing/examples/misc_exporter_gltf.ts delete mode 100644 examples-testing/examples/misc_exporter_ply.ts delete mode 100644 examples-testing/examples/physics_rapier_instancing.ts diff --git a/examples-testing/examples/misc_controls_fly.ts b/examples-testing/examples/misc_controls_fly.ts deleted file mode 100644 index c14477b8c..000000000 --- a/examples-testing/examples/misc_controls_fly.ts +++ /dev/null @@ -1,263 +0,0 @@ -import * as THREE from "three"; - -import Stats from "three/addons/libs/stats.module.js"; - -import { FlyControls } from "three/addons/controls/FlyControls.js"; -import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js"; -import { RenderPass } from "three/addons/postprocessing/RenderPass.js"; -import { FilmPass } from "three/addons/postprocessing/FilmPass.js"; -import { OutputPass } from "three/addons/postprocessing/OutputPass.js"; - -const radius = 6371; -const tilt = 0.41; -const rotationSpeed = 0.02; - -const cloudsScale = 1.005; -const moonScale = 0.23; - -const MARGIN = 0; -let SCREEN_HEIGHT = window.innerHeight - MARGIN * 2; -let SCREEN_WIDTH = window.innerWidth; - -let camera, controls, scene, renderer, stats; -let geometry, meshPlanet, meshClouds, meshMoon; -let dirLight; - -let composer; - -const textureLoader = new THREE.TextureLoader(); - -let d, dPlanet, dMoon; -const dMoonVec = new THREE.Vector3(); - -const clock = new THREE.Clock(); - -init(); -animate(); - -function init() { - camera = new THREE.PerspectiveCamera( - 25, - SCREEN_WIDTH / SCREEN_HEIGHT, - 50, - 1e7 - ); - camera.position.z = radius * 5; - - scene = new THREE.Scene(); - scene.fog = new THREE.FogExp2(0x000000, 0.00000025); - - dirLight = new THREE.DirectionalLight(0xffffff, 3); - dirLight.position.set(-1, 0, 1).normalize(); - scene.add(dirLight); - - const materialNormalMap = new THREE.MeshPhongMaterial({ - specular: 0x7c7c7c, - shininess: 15, - map: textureLoader.load("textures/planets/earth_atmos_2048.jpg"), - specularMap: textureLoader.load("textures/planets/earth_specular_2048.jpg"), - normalMap: textureLoader.load("textures/planets/earth_normal_2048.jpg"), - - // y scale is negated to compensate for normal map handedness. - normalScale: new THREE.Vector2(0.85, -0.85), - }); - materialNormalMap.map.colorSpace = THREE.SRGBColorSpace; - - // planet - - geometry = new THREE.SphereGeometry(radius, 100, 50); - - meshPlanet = new THREE.Mesh(geometry, materialNormalMap); - meshPlanet.rotation.y = 0; - meshPlanet.rotation.z = tilt; - scene.add(meshPlanet); - - // clouds - - const materialClouds = new THREE.MeshLambertMaterial({ - map: textureLoader.load("textures/planets/earth_clouds_1024.png"), - transparent: true, - }); - materialClouds.map.colorSpace = THREE.SRGBColorSpace; - - meshClouds = new THREE.Mesh(geometry, materialClouds); - meshClouds.scale.set(cloudsScale, cloudsScale, cloudsScale); - meshClouds.rotation.z = tilt; - scene.add(meshClouds); - - // moon - - const materialMoon = new THREE.MeshPhongMaterial({ - map: textureLoader.load("textures/planets/moon_1024.jpg"), - }); - materialMoon.map.colorSpace = THREE.SRGBColorSpace; - - meshMoon = new THREE.Mesh(geometry, materialMoon); - meshMoon.position.set(radius * 5, 0, 0); - meshMoon.scale.set(moonScale, moonScale, moonScale); - scene.add(meshMoon); - - // stars - - const r = radius, - starsGeometry = [new THREE.BufferGeometry(), new THREE.BufferGeometry()]; - - const vertices1 = []; - const vertices2 = []; - - const vertex = new THREE.Vector3(); - - for (let i = 0; i < 250; i++) { - vertex.x = Math.random() * 2 - 1; - vertex.y = Math.random() * 2 - 1; - vertex.z = Math.random() * 2 - 1; - vertex.multiplyScalar(r); - - vertices1.push(vertex.x, vertex.y, vertex.z); - } - - for (let i = 0; i < 1500; i++) { - vertex.x = Math.random() * 2 - 1; - vertex.y = Math.random() * 2 - 1; - vertex.z = Math.random() * 2 - 1; - vertex.multiplyScalar(r); - - vertices2.push(vertex.x, vertex.y, vertex.z); - } - - starsGeometry[0].setAttribute( - "position", - new THREE.Float32BufferAttribute(vertices1, 3) - ); - starsGeometry[1].setAttribute( - "position", - new THREE.Float32BufferAttribute(vertices2, 3) - ); - - const starsMaterials = [ - new THREE.PointsMaterial({ - color: 0x9c9c9c, - size: 2, - sizeAttenuation: false, - }), - new THREE.PointsMaterial({ - color: 0x9c9c9c, - size: 1, - sizeAttenuation: false, - }), - new THREE.PointsMaterial({ - color: 0x7c7c7c, - size: 2, - sizeAttenuation: false, - }), - new THREE.PointsMaterial({ - color: 0x838383, - size: 1, - sizeAttenuation: false, - }), - new THREE.PointsMaterial({ - color: 0x5a5a5a, - size: 2, - sizeAttenuation: false, - }), - new THREE.PointsMaterial({ - color: 0x5a5a5a, - size: 1, - sizeAttenuation: false, - }), - ]; - - for (let i = 10; i < 30; i++) { - const stars = new THREE.Points(starsGeometry[i % 2], starsMaterials[i % 6]); - - stars.rotation.x = Math.random() * 6; - stars.rotation.y = Math.random() * 6; - stars.rotation.z = Math.random() * 6; - stars.scale.setScalar(i * 10); - - stars.matrixAutoUpdate = false; - stars.updateMatrix(); - - scene.add(stars); - } - - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); - renderer.useLegacyLights = false; - document.body.appendChild(renderer.domElement); - - // - - controls = new FlyControls(camera, renderer.domElement); - - controls.movementSpeed = 1000; - controls.domElement = renderer.domElement; - controls.rollSpeed = Math.PI / 24; - controls.autoForward = false; - controls.dragToLook = false; - - // - - stats = new Stats(); - document.body.appendChild(stats.dom); - - window.addEventListener("resize", onWindowResize); - - // postprocessing - - const renderModel = new RenderPass(scene, camera); - const effectFilm = new FilmPass(0.35, 0.75, 2048, false); - const outputPass = new OutputPass(); - - composer = new EffectComposer(renderer); - - composer.addPass(renderModel); - composer.addPass(effectFilm); - composer.addPass(outputPass); -} - -function onWindowResize() { - SCREEN_HEIGHT = window.innerHeight; - SCREEN_WIDTH = window.innerWidth; - - camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT; - camera.updateProjectionMatrix(); - - renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); - composer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); -} - -function animate() { - requestAnimationFrame(animate); - - render(); - stats.update(); -} - -function render() { - // rotate the planet and clouds - - const delta = clock.getDelta(); - - meshPlanet.rotation.y += rotationSpeed * delta; - meshClouds.rotation.y += 1.25 * rotationSpeed * delta; - - // slow down as we approach the surface - - dPlanet = camera.position.length(); - - dMoonVec.subVectors(camera.position, meshMoon.position); - dMoon = dMoonVec.length(); - - if (dMoon < dPlanet) { - d = dMoon - radius * moonScale * 1.01; - } else { - d = dPlanet - radius * 1.01; - } - - controls.movementSpeed = 0.33 * d; - controls.update(delta); - - composer.render(delta); -} diff --git a/examples-testing/examples/misc_exporter_gltf.ts b/examples-testing/examples/misc_exporter_gltf.ts deleted file mode 100644 index 354f66f52..000000000 --- a/examples-testing/examples/misc_exporter_gltf.ts +++ /dev/null @@ -1,539 +0,0 @@ -import * as THREE from "three"; - -import { GLTFExporter } from "three/addons/exporters/GLTFExporter.js"; -import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js"; -import { KTX2Loader } from "three/addons/loaders/KTX2Loader.js"; -import { MeshoptDecoder } from "three/addons/libs/meshopt_decoder.module.js"; -import { GUI } from "three/addons/libs/lil-gui.module.min.js"; - -function exportGLTF(input) { - const gltfExporter = new GLTFExporter(); - - const options = { - trs: params.trs, - onlyVisible: params.onlyVisible, - binary: params.binary, - maxTextureSize: params.maxTextureSize, - }; - gltfExporter.parse( - input, - function (result) { - if (result instanceof ArrayBuffer) { - saveArrayBuffer(result, "scene.glb"); - } else { - const output = JSON.stringify(result, null, 2); - console.log(output); - saveString(output, "scene.gltf"); - } - }, - function (error) { - console.log("An error happened during parsing", error); - }, - options - ); -} - -const link = document.createElement("a"); -link.style.display = "none"; -document.body.appendChild(link); // Firefox workaround, see #6594 - -function save(blob, filename) { - link.href = URL.createObjectURL(blob); - link.download = filename; - link.click(); - - // URL.revokeObjectURL( url ); breaks Firefox... -} - -function saveString(text, filename) { - save(new Blob([text], { type: "text/plain" }), filename); -} - -function saveArrayBuffer(buffer, filename) { - save(new Blob([buffer], { type: "application/octet-stream" }), filename); -} - -let container; - -let camera, object, object2, material, geometry, scene1, scene2, renderer; -let gridHelper, sphere, model, coffeemat; - -const params = { - trs: false, - onlyVisible: true, - binary: false, - maxTextureSize: 4096, - exportScene1: exportScene1, - exportScenes: exportScenes, - exportSphere: exportSphere, - exportModel: exportModel, - exportObjects: exportObjects, - exportSceneObject: exportSceneObject, - exportCompressedObject: exportCompressedObject, -}; - -init(); -animate(); - -function init() { - container = document.createElement("div"); - document.body.appendChild(container); - - // Make linear gradient texture - - const data = new Uint8ClampedArray(100 * 100 * 4); - - for (let y = 0; y < 100; y++) { - for (let x = 0; x < 100; x++) { - const stride = 4 * (100 * y + x); - - data[stride] = Math.round((255 * y) / 99); - data[stride + 1] = Math.round(255 - (255 * y) / 99); - data[stride + 2] = 0; - data[stride + 3] = 255; - } - } - - const gradientTexture = new THREE.DataTexture( - data, - 100, - 100, - THREE.RGBAFormat - ); - gradientTexture.minFilter = THREE.LinearFilter; - gradientTexture.magFilter = THREE.LinearFilter; - gradientTexture.needsUpdate = true; - - scene1 = new THREE.Scene(); - scene1.name = "Scene1"; - - // --------------------------------------------------------------------- - // Perspective Camera - // --------------------------------------------------------------------- - camera = new THREE.PerspectiveCamera( - 45, - window.innerWidth / window.innerHeight, - 1, - 2000 - ); - camera.position.set(600, 400, 0); - - camera.name = "PerspectiveCamera"; - scene1.add(camera); - - // --------------------------------------------------------------------- - // Ambient light - // --------------------------------------------------------------------- - const ambientLight = new THREE.AmbientLight(0xcccccc); - ambientLight.name = "AmbientLight"; - scene1.add(ambientLight); - - // --------------------------------------------------------------------- - // DirectLight - // --------------------------------------------------------------------- - const dirLight = new THREE.DirectionalLight(0xffffff, 3); - dirLight.target.position.set(0, 0, -1); - dirLight.add(dirLight.target); - dirLight.lookAt(-1, -1, 0); - dirLight.name = "DirectionalLight"; - scene1.add(dirLight); - - // --------------------------------------------------------------------- - // Grid - // --------------------------------------------------------------------- - gridHelper = new THREE.GridHelper(2000, 20, 0xc1c1c1, 0x8d8d8d); - gridHelper.position.y = -50; - gridHelper.name = "Grid"; - scene1.add(gridHelper); - - // --------------------------------------------------------------------- - // Axes - // --------------------------------------------------------------------- - const axes = new THREE.AxesHelper(500); - axes.name = "AxesHelper"; - scene1.add(axes); - - // --------------------------------------------------------------------- - // Simple geometry with basic material - // --------------------------------------------------------------------- - // Icosahedron - const mapGrid = new THREE.TextureLoader().load("textures/uv_grid_opengl.jpg"); - mapGrid.wrapS = mapGrid.wrapT = THREE.RepeatWrapping; - mapGrid.colorSpace = THREE.SRGBColorSpace; - material = new THREE.MeshBasicMaterial({ - color: 0xffffff, - map: mapGrid, - }); - - object = new THREE.Mesh(new THREE.IcosahedronGeometry(75, 0), material); - object.position.set(-200, 0, 200); - object.name = "Icosahedron"; - scene1.add(object); - - // Octahedron - material = new THREE.MeshBasicMaterial({ - color: 0x0000ff, - wireframe: true, - }); - object = new THREE.Mesh(new THREE.OctahedronGeometry(75, 1), material); - object.position.set(0, 0, 200); - object.name = "Octahedron"; - scene1.add(object); - - // Tetrahedron - material = new THREE.MeshBasicMaterial({ - color: 0xff0000, - transparent: true, - opacity: 0.5, - }); - - object = new THREE.Mesh(new THREE.TetrahedronGeometry(75, 0), material); - object.position.set(200, 0, 200); - object.name = "Tetrahedron"; - scene1.add(object); - - // --------------------------------------------------------------------- - // Buffered geometry primitives - // --------------------------------------------------------------------- - // Sphere - material = new THREE.MeshStandardMaterial({ - color: 0xffff00, - metalness: 0.5, - roughness: 1.0, - flatShading: true, - }); - material.map = gradientTexture; - sphere = new THREE.Mesh(new THREE.SphereGeometry(70, 10, 10), material); - sphere.position.set(0, 0, 0); - sphere.name = "Sphere"; - scene1.add(sphere); - - // Cylinder - material = new THREE.MeshStandardMaterial({ - color: 0xff00ff, - flatShading: true, - }); - object = new THREE.Mesh(new THREE.CylinderGeometry(10, 80, 100), material); - object.position.set(200, 0, 0); - object.name = "Cylinder"; - scene1.add(object); - - // TorusKnot - material = new THREE.MeshStandardMaterial({ - color: 0xff0000, - roughness: 1, - }); - object = new THREE.Mesh( - new THREE.TorusKnotGeometry(50, 15, 40, 10), - material - ); - object.position.set(-200, 0, 0); - object.name = "Cylinder"; - scene1.add(object); - - // --------------------------------------------------------------------- - // Hierarchy - // --------------------------------------------------------------------- - const mapWood = new THREE.TextureLoader().load( - "textures/hardwood2_diffuse.jpg" - ); - material = new THREE.MeshStandardMaterial({ - map: mapWood, - side: THREE.DoubleSide, - }); - - object = new THREE.Mesh(new THREE.BoxGeometry(40, 100, 100), material); - object.position.set(-200, 0, 400); - object.name = "Cube"; - scene1.add(object); - - object2 = new THREE.Mesh( - new THREE.BoxGeometry(40, 40, 40, 2, 2, 2), - material - ); - object2.position.set(0, 0, 50); - object2.rotation.set(0, 45, 0); - object2.name = "SubCube"; - object.add(object2); - - // --------------------------------------------------------------------- - // Groups - // --------------------------------------------------------------------- - const group1 = new THREE.Group(); - group1.name = "Group"; - scene1.add(group1); - - const group2 = new THREE.Group(); - group2.name = "subGroup"; - group2.position.set(0, 50, 0); - group1.add(group2); - - object2 = new THREE.Mesh(new THREE.BoxGeometry(30, 30, 30), material); - object2.name = "Cube in group"; - object2.position.set(0, 0, 400); - group2.add(object2); - - // --------------------------------------------------------------------- - // THREE.Line Strip - // --------------------------------------------------------------------- - geometry = new THREE.BufferGeometry(); - let numPoints = 100; - let positions = new Float32Array(numPoints * 3); - - for (let i = 0; i < numPoints; i++) { - positions[i * 3] = i; - positions[i * 3 + 1] = Math.sin(i / 2) * 20; - positions[i * 3 + 2] = 0; - } - - geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3)); - object = new THREE.Line( - geometry, - new THREE.LineBasicMaterial({ color: 0xffff00 }) - ); - object.position.set(-50, 0, -200); - scene1.add(object); - - // --------------------------------------------------------------------- - // THREE.Line Loop - // --------------------------------------------------------------------- - geometry = new THREE.BufferGeometry(); - numPoints = 5; - const radius = 70; - positions = new Float32Array(numPoints * 3); - - for (let i = 0; i < numPoints; i++) { - const s = (i * Math.PI * 2) / numPoints; - positions[i * 3] = radius * Math.sin(s); - positions[i * 3 + 1] = radius * Math.cos(s); - positions[i * 3 + 2] = 0; - } - - geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3)); - object = new THREE.LineLoop( - geometry, - new THREE.LineBasicMaterial({ color: 0xffff00 }) - ); - object.position.set(0, 0, -200); - - scene1.add(object); - - // --------------------------------------------------------------------- - // THREE.Points - // --------------------------------------------------------------------- - numPoints = 100; - const pointsArray = new Float32Array(numPoints * 3); - for (let i = 0; i < numPoints; i++) { - pointsArray[3 * i] = -50 + Math.random() * 100; - pointsArray[3 * i + 1] = Math.random() * 100; - pointsArray[3 * i + 2] = -50 + Math.random() * 100; - } - - const pointsGeo = new THREE.BufferGeometry(); - pointsGeo.setAttribute("position", new THREE.BufferAttribute(pointsArray, 3)); - - const pointsMaterial = new THREE.PointsMaterial({ color: 0xffff00, size: 5 }); - const pointCloud = new THREE.Points(pointsGeo, pointsMaterial); - pointCloud.name = "Points"; - pointCloud.position.set(-200, 0, -200); - scene1.add(pointCloud); - - // --------------------------------------------------------------------- - // Ortho camera - // --------------------------------------------------------------------- - const cameraOrtho = new THREE.OrthographicCamera( - window.innerWidth / -2, - window.innerWidth / 2, - window.innerHeight / 2, - window.innerHeight / -2, - 0.1, - 10 - ); - scene1.add(cameraOrtho); - cameraOrtho.name = "OrthographicCamera"; - - material = new THREE.MeshLambertMaterial({ - color: 0xffff00, - side: THREE.DoubleSide, - }); - - object = new THREE.Mesh( - new THREE.CircleGeometry(50, 20, 0, Math.PI * 2), - material - ); - object.position.set(200, 0, -400); - scene1.add(object); - - object = new THREE.Mesh( - new THREE.RingGeometry(10, 50, 20, 5, 0, Math.PI * 2), - material - ); - object.position.set(0, 0, -400); - scene1.add(object); - - object = new THREE.Mesh( - new THREE.CylinderGeometry(25, 75, 100, 40, 5), - material - ); - object.position.set(-200, 0, -400); - scene1.add(object); - - // - const points = []; - - for (let i = 0; i < 50; i++) { - points.push( - new THREE.Vector2( - Math.sin(i * 0.2) * Math.sin(i * 0.1) * 15 + 50, - (i - 5) * 2 - ) - ); - } - - object = new THREE.Mesh(new THREE.LatheGeometry(points, 20), material); - object.position.set(200, 0, 400); - scene1.add(object); - - // --------------------------------------------------------------------- - // Big red box hidden just for testing `onlyVisible` option - // --------------------------------------------------------------------- - material = new THREE.MeshBasicMaterial({ - color: 0xff0000, - }); - object = new THREE.Mesh(new THREE.BoxGeometry(200, 200, 200), material); - object.position.set(0, 0, 0); - object.name = "CubeHidden"; - object.visible = false; - scene1.add(object); - - // --------------------------------------------------------------------- - // Model requiring KHR_mesh_quantization - // --------------------------------------------------------------------- - const loader = new GLTFLoader(); - loader.load("models/gltf/ShaderBall.glb", function (gltf) { - model = gltf.scene; - model.scale.setScalar(50); - model.position.set(200, -40, -200); - scene1.add(model); - }); - - // --------------------------------------------------------------------- - // 2nd THREE.Scene - // --------------------------------------------------------------------- - scene2 = new THREE.Scene(); - object = new THREE.Mesh(new THREE.BoxGeometry(100, 100, 100), material); - object.position.set(0, 0, 0); - object.name = "Cube2ndScene"; - scene2.name = "Scene2"; - scene2.add(object); - - // - - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - renderer.useLegacyLights = false; - renderer.toneMapping = THREE.ACESFilmicToneMapping; - renderer.toneMappingExposure = 1; - - container.appendChild(renderer.domElement); - - // - - window.addEventListener("resize", onWindowResize); - - // --------------------------------------------------------------------- - // Exporting compressed textures and meshes (KTX2 / Draco / Meshopt) - // --------------------------------------------------------------------- - const ktx2Loader = new KTX2Loader() - .setTranscoderPath("jsm/libs/basis/") - .detectSupport(renderer); - - const gltfLoader = new GLTFLoader().setPath("models/gltf/"); - gltfLoader.setKTX2Loader(ktx2Loader); - gltfLoader.setMeshoptDecoder(MeshoptDecoder); - gltfLoader.load("coffeemat.glb", function (gltf) { - gltf.scene.position.x = 400; - gltf.scene.position.z = -200; - - scene1.add(gltf.scene); - - coffeemat = gltf.scene; - }); - - // - - const gui = new GUI(); - - let h = gui.addFolder("Settings"); - h.add(params, "trs").name("Use TRS"); - h.add(params, "onlyVisible").name("Only Visible Objects"); - h.add(params, "binary").name("Binary (GLB)"); - h.add(params, "maxTextureSize", 2, 8192).name("Max Texture Size").step(1); - - h = gui.addFolder("Export"); - h.add(params, "exportScene1").name("Export Scene 1"); - h.add(params, "exportScenes").name("Export Scene 1 and 2"); - h.add(params, "exportSphere").name("Export Sphere"); - h.add(params, "exportModel").name("Export Model"); - h.add(params, "exportObjects").name("Export Sphere With Grid"); - h.add(params, "exportSceneObject").name("Export Scene 1 and Object"); - h.add(params, "exportCompressedObject").name( - "Export Coffeemat (from compressed data)" - ); - - gui.open(); -} - -function exportScene1() { - exportGLTF(scene1); -} - -function exportScenes() { - exportGLTF([scene1, scene2]); -} - -function exportSphere() { - exportGLTF(sphere); -} - -function exportModel() { - exportGLTF(model); -} - -function exportObjects() { - exportGLTF([sphere, gridHelper]); -} - -function exportSceneObject() { - exportGLTF([scene1, gridHelper]); -} - -function exportCompressedObject() { - exportGLTF([coffeemat]); -} - -function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - - renderer.setSize(window.innerWidth, window.innerHeight); -} - -// - -function animate() { - requestAnimationFrame(animate); - - render(); -} - -function render() { - const timer = Date.now() * 0.0001; - - camera.position.x = Math.cos(timer) * 800; - camera.position.z = Math.sin(timer) * 800; - - camera.lookAt(scene1.position); - renderer.render(scene1, camera); -} diff --git a/examples-testing/examples/misc_exporter_ply.ts b/examples-testing/examples/misc_exporter_ply.ts deleted file mode 100644 index eb04754b8..000000000 --- a/examples-testing/examples/misc_exporter_ply.ts +++ /dev/null @@ -1,163 +0,0 @@ -import * as THREE from "three"; - -import { OrbitControls } from "three/addons/controls/OrbitControls.js"; -import { PLYExporter } from "three/addons/exporters/PLYExporter.js"; -import { GUI } from "three/addons/libs/lil-gui.module.min.js"; - -let scene, camera, renderer, exporter, mesh; - -const params = { - exportASCII: exportASCII, - exportBinaryBigEndian: exportBinaryBigEndian, - exportBinaryLittleEndian: exportBinaryLittleEndian, -}; - -init(); -animate(); - -function init() { - camera = new THREE.PerspectiveCamera( - 45, - window.innerWidth / window.innerHeight, - 0.1, - 100 - ); - camera.position.set(4, 2, 4); - - scene = new THREE.Scene(); - scene.background = new THREE.Color(0xa0a0a0); - scene.fog = new THREE.Fog(0xa0a0a0, 4, 20); - - exporter = new PLYExporter(); - - // - - const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 3); - hemiLight.position.set(0, 20, 0); - scene.add(hemiLight); - - const directionalLight = new THREE.DirectionalLight(0xffffff, 3); - directionalLight.position.set(0, 20, 10); - directionalLight.castShadow = true; - directionalLight.shadow.camera.top = 2; - directionalLight.shadow.camera.bottom = -2; - directionalLight.shadow.camera.left = -2; - directionalLight.shadow.camera.right = 2; - scene.add(directionalLight); - - // ground - - const ground = new THREE.Mesh( - new THREE.PlaneGeometry(40, 40), - new THREE.MeshPhongMaterial({ color: 0xcbcbcb, depthWrite: false }) - ); - ground.rotation.x = -Math.PI / 2; - ground.receiveShadow = true; - scene.add(ground); - - const grid = new THREE.GridHelper(40, 20, 0x000000, 0x000000); - grid.material.opacity = 0.2; - grid.material.transparent = true; - scene.add(grid); - - // export mesh - - const geometry = new THREE.BoxGeometry(); - const material = new THREE.MeshPhongMaterial({ vertexColors: true }); - - // color vertices based on vertex positions - const colors = geometry.getAttribute("position").array.slice(); - for (let i = 0, l = colors.length; i < l; i++) { - if (colors[i] > 0) colors[i] = 0.5; - else colors[i] = 0; - } - - geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3, false)); - - mesh = new THREE.Mesh(geometry, material); - mesh.castShadow = true; - mesh.position.y = 0.5; - scene.add(mesh); - - // - - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - renderer.useLegacyLights = false; - renderer.shadowMap.enabled = true; - document.body.appendChild(renderer.domElement); - - // - - const controls = new OrbitControls(camera, renderer.domElement); - controls.target.set(0, 0.5, 0); - controls.update(); - - // - - window.addEventListener("resize", onWindowResize); - - const gui = new GUI(); - - gui.add(params, "exportASCII").name("Export PLY (ASCII)"); - gui.add(params, "exportBinaryBigEndian").name("Export PLY (Binary BE)"); - gui.add(params, "exportBinaryLittleEndian").name("Export PLY (Binary LE)"); - gui.open(); -} - -function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - - renderer.setSize(window.innerWidth, window.innerHeight); -} - -function animate() { - requestAnimationFrame(animate); - renderer.render(scene, camera); -} - -function exportASCII() { - exporter.parse(mesh, function (result) { - saveString(result, "box.ply"); - }); -} - -function exportBinaryBigEndian() { - exporter.parse( - mesh, - function (result) { - saveArrayBuffer(result, "box.ply"); - }, - { binary: true } - ); -} - -function exportBinaryLittleEndian() { - exporter.parse( - mesh, - function (result) { - saveArrayBuffer(result, "box.ply"); - }, - { binary: true, littleEndian: true } - ); -} - -const link = document.createElement("a"); -link.style.display = "none"; -document.body.appendChild(link); - -function save(blob, filename) { - link.href = URL.createObjectURL(blob); - link.download = filename; - link.click(); -} - -function saveString(text, filename) { - save(new Blob([text], { type: "text/plain" }), filename); -} - -function saveArrayBuffer(buffer, filename) { - save(new Blob([buffer], { type: "application/octet-stream" }), filename); -} diff --git a/examples-testing/examples/physics_rapier_instancing.ts b/examples-testing/examples/physics_rapier_instancing.ts deleted file mode 100644 index 0976b545b..000000000 --- a/examples-testing/examples/physics_rapier_instancing.ts +++ /dev/null @@ -1,139 +0,0 @@ -import * as THREE from "three"; -import { OrbitControls } from "three/addons/controls/OrbitControls.js"; -import { RapierPhysics } from "three/addons/physics/RapierPhysics.js"; -import Stats from "three/addons/libs/stats.module.js"; - -let camera, scene, renderer, stats; -let physics, position; - -let boxes, spheres; - -init(); - -async function init() { - physics = await RapierPhysics(); - position = new THREE.Vector3(); - - // - - camera = new THREE.PerspectiveCamera( - 50, - window.innerWidth / window.innerHeight, - 0.1, - 100 - ); - camera.position.set(-1, 1.5, 2); - camera.lookAt(0, 0.5, 0); - - scene = new THREE.Scene(); - scene.background = new THREE.Color(0x666666); - - const hemiLight = new THREE.HemisphereLight(); - scene.add(hemiLight); - - const dirLight = new THREE.DirectionalLight(0xffffff, 3); - dirLight.position.set(5, 5, 5); - dirLight.castShadow = true; - dirLight.shadow.camera.zoom = 2; - scene.add(dirLight); - - const floor = new THREE.Mesh( - new THREE.BoxGeometry(10, 5, 10), - new THREE.ShadowMaterial({ color: 0x444444 }) - ); - floor.position.y = -2.5; - floor.receiveShadow = true; - scene.add(floor); - physics.addMesh(floor); - - // - - const material = new THREE.MeshLambertMaterial(); - - const matrix = new THREE.Matrix4(); - const color = new THREE.Color(); - - // Boxes - - const geometryBox = new THREE.BoxGeometry(0.075, 0.075, 0.075); - boxes = new THREE.InstancedMesh(geometryBox, material, 400); - boxes.instanceMatrix.setUsage(THREE.DynamicDrawUsage); // will be updated every frame - boxes.castShadow = true; - boxes.receiveShadow = true; - scene.add(boxes); - - for (let i = 0; i < boxes.count; i++) { - matrix.setPosition( - Math.random() - 0.5, - Math.random() * 2, - Math.random() - 0.5 - ); - boxes.setMatrixAt(i, matrix); - boxes.setColorAt(i, color.setHex(0xffffff * Math.random())); - } - - physics.addMesh(boxes, 1); - - // Spheres - - const geometrySphere = new THREE.IcosahedronGeometry(0.05, 4); - spheres = new THREE.InstancedMesh(geometrySphere, material, 400); - spheres.instanceMatrix.setUsage(THREE.DynamicDrawUsage); // will be updated every frame - spheres.castShadow = true; - spheres.receiveShadow = true; - scene.add(spheres); - - for (let i = 0; i < spheres.count; i++) { - matrix.setPosition( - Math.random() - 0.5, - Math.random() * 2, - Math.random() - 0.5 - ); - spheres.setMatrixAt(i, matrix); - spheres.setColorAt(i, color.setHex(0xffffff * Math.random())); - } - - physics.addMesh(spheres, 1); - - // - - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - renderer.useLegacyLights = false; - renderer.shadowMap.enabled = true; - document.body.appendChild(renderer.domElement); - - stats = new Stats(); - document.body.appendChild(stats.dom); - - // - - const controls = new OrbitControls(camera, renderer.domElement); - controls.target.y = 0.5; - controls.update(); - - animate(); - - setInterval(() => { - let index = Math.floor(Math.random() * boxes.count); - - position.set(0, Math.random() + 1, 0); - physics.setMeshPosition(boxes, position, index); - - // - - index = Math.floor(Math.random() * spheres.count); - - position.set(0, Math.random() + 1, 0); - physics.setMeshPosition(spheres, position, index); - }, 1000 / 60); -} - -function animate() { - requestAnimationFrame(animate); - - renderer.render(scene, camera); - - stats.update(); -} diff --git a/examples-testing/index.js b/examples-testing/index.js index 6d69b5342..a9bfd824a 100644 --- a/examples-testing/index.js +++ b/examples-testing/index.js @@ -383,7 +383,7 @@ const files = { // 'physics_ammo_rope', // 'physics_ammo_terrain', // 'physics_ammo_volume', - 'physics_rapier_instancing', + // 'physics_rapier_instancing', ], misc: [ 'misc_animation_groups', @@ -391,16 +391,16 @@ const files = { 'misc_boxselection', 'misc_controls_arcball', 'misc_controls_drag', - 'misc_controls_fly', + // 'misc_controls_fly', 'misc_controls_map', 'misc_controls_orbit', 'misc_controls_pointerlock', 'misc_controls_trackball', 'misc_controls_transform', 'misc_exporter_draco', - 'misc_exporter_gltf', + // 'misc_exporter_gltf', 'misc_exporter_obj', - 'misc_exporter_ply', + // 'misc_exporter_ply', 'misc_exporter_stl', 'misc_exporter_usdz', 'misc_lookat', @@ -427,6 +427,9 @@ const re = /