From 92f08cc7e2fdcb9cf01cd4de8b3cf3d4ddc85c54 Mon Sep 17 00:00:00 2001 From: "Mr.doob" Date: Sun, 23 Jun 2019 15:24:37 -0700 Subject: [PATCH] Examples: Improved webvr_paint. --- examples/webvr_paint.html | 91 ++++++++------------------------------- 1 file changed, 18 insertions(+), 73 deletions(-) diff --git a/examples/webvr_paint.html b/examples/webvr_paint.html index 4e915e1e5a..6d3f3d1de8 100644 --- a/examples/webvr_paint.html +++ b/examples/webvr_paint.html @@ -21,8 +21,8 @@ BufferAttribute, BufferGeometry, Color, + CylinderBufferGeometry, DirectionalLight, - DoubleSide, GridHelper, HemisphereLight, IcosahedronBufferGeometry, @@ -32,14 +32,11 @@ PerspectiveCamera, PlaneBufferGeometry, Scene, - TextureLoader, VertexColors, Vector3, WebGLRenderer } from "../build/three.module.js"; - import { OBJLoader } from './jsm/loaders/OBJLoader.js'; - var container; var camera, scene, renderer; var controller1, controller2; @@ -77,18 +74,7 @@ var table = new Mesh( geometry, material ); table.position.y = 0.35; table.position.z = 0.85; - table.castShadow = true; - table.receiveShadow = true; - scene.add( table ); - - /* - var table = new Mesh( geometry, material ); - table.position.y = 0.35; - table.position.z = -0.85; - table.castShadow = true; - table.receiveShadow = true; scene.add( table ); - */ var geometry = new PlaneBufferGeometry( 4, 4 ); var material = new MeshStandardMaterial( { @@ -98,26 +84,18 @@ } ); var floor = new Mesh( geometry, material ); floor.rotation.x = - Math.PI / 2; - floor.receiveShadow = true; scene.add( floor ); - scene.add( new GridHelper( 20, 40, 0x111111, 0x111111 ) ); + var grid = new GridHelper( 10, 20, 0x111111, 0x111111 ); + grid.material.depthTest = false; // avoid z-fighting + scene.add( grid ); scene.add( new HemisphereLight( 0x888877, 0x777788 ) ); - var light = new DirectionalLight( 0xffffff ); - light.position.set( 0, 6, 0 ); - light.castShadow = true; - light.shadow.camera.top = 2; - light.shadow.camera.bottom = - 2; - light.shadow.camera.right = 2; - light.shadow.camera.left = - 2; - light.shadow.mapSize.set( 4096, 4096 ); + var light = new DirectionalLight( 0xffffff, 0.5 ); + light.position.set( 0, 4, 0 ); scene.add( light ); - // scene.add( new DirectionalLightHelper( light ) ); - // scene.add( new CameraHelper( light.shadow.camera ) ); - // renderer = new WebGLRenderer( { antialias: true } ); @@ -125,7 +103,6 @@ renderer.setSize( window.innerWidth, window.innerHeight ); renderer.gammaInput = true; renderer.gammaOutput = true; - renderer.shadowMap.enabled = true; renderer.vr.enabled = true; container.appendChild( renderer.domElement ); @@ -159,34 +136,20 @@ controller2.userData.matrices = [ new Matrix4(), new Matrix4() ]; scene.add( controller2 ); - var loader = new OBJLoader(); - loader.setPath( 'models/obj/vive-controller/' ); - loader.load( 'vr_controller_vive_1_5.obj', function ( object ) { - - var loader = new TextureLoader(); - loader.setPath( 'models/obj/vive-controller/' ); - - var controller = object.children[ 0 ]; - controller.material.map = loader.load( 'onepointfive_texture.png' ); - controller.material.specularMap = loader.load( 'onepointfive_spec.png' ); - controller.castShadow = true; - controller.receiveShadow = true; - - // var pivot = new Group(); - // var pivot = new Mesh( new BoxBufferGeometry( 0.01, 0.01, 0.01 ) ); - var pivot = new Mesh( new IcosahedronBufferGeometry( 0.01, 2 ) ); - pivot.name = 'pivot'; - pivot.position.y = - 0.016; - pivot.position.z = - 0.043; - pivot.rotation.x = Math.PI / 5.5; - controller.add( pivot ); + // - controller1.add( controller.clone() ); + var geometry = new CylinderBufferGeometry( 0.01, 0.02, 0.08, 5 ); + geometry.rotateX( - Math.PI / 2 ); + var material = new MeshStandardMaterial( { flatShading: true } ); + var mesh = new Mesh( geometry, material ); - pivot.material = pivot.material.clone(); - controller2.add( controller.clone() ); + var pivot = new Mesh( new IcosahedronBufferGeometry( 0.01, 2 ) ); + pivot.name = 'pivot'; + pivot.position.z = - 0.05; + mesh.add( pivot ); - } ); + controller1.add( mesh.clone() ); + controller2.add( mesh.clone() ); // @@ -212,32 +175,14 @@ geometry.drawRange.count = 0; - // - - /* - var path = "textures/cube/SwedishRoyalCastle/"; - var format = '.jpg'; - var urls = [ - path + 'px' + format, path + 'nx' + format, - path + 'py' + format, path + 'ny' + format, - path + 'pz' + format, path + 'nz' + format - ]; - - var reflectionCube = new CubeTextureLoader().load( urls ); - */ - var material = new MeshStandardMaterial( { roughness: 0.9, metalness: 0.0, - // envMap: reflectionCube, - vertexColors: VertexColors, - side: DoubleSide + vertexColors: VertexColors } ); line = new Mesh( geometry, material ); line.frustumCulled = false; - line.castShadow = true; - line.receiveShadow = true; scene.add( line ); // Shapes -- GitLab