three.js | 易学教程

Unity3D开发WebVR之WebVR Assets使用

阅读更多关于 Unity3D开发WebVR之WebVR Assets使用

各种事情导致个人微博没有在更新，一年多时间，现在继续保持写博客的良好习惯。最近一直在做WebVR的项目，所以感受颇深，着这里跟大家交流交流。 WebVR目前标准协议不是很统一，但是底层基本上都是基于Three.js展开的，而目前最方便的就是使用Aframe框架，实体组件形式加入元素，跟Unity3D使用类似，用起来比较方便，还有使用JS基于Three.js自己编码等等。对这些我都不是很精通略知皮毛，所以今天说一说Unity开发WebVR。 Unity开发WebVR要使用WebVR Assets插件（Asset Store上就有）主要是这句话 * All other browsers supported through the WebVR polyfill. 设置平台WebGL 开发的过程中设置 other Settings设置中Scripting Runtime Version 设置成.net 4x.. 下载HTC Vive SDK 注意：一定要设置PC 下的XR Setting 中Virtual Reality SDKs Scripting Define Symbols 要设置最后附上插件github上地址： https://github.com/gtk2k/Unity-WebVR-Assets 来源： oschina 链接： https://my.oschina.net

001-webaudio

阅读更多关于 001-webaudio

这是学习Three.js 官方案例系列 001-webaudio - visualizer 体验地址片元 shader: // tAudioData: 0~64数组,只在 tAudioData[0].a 有数值,该数值表示该通道上的音值大小。 uniform sampler2D tAudioData ; uniform float style ; varying vec2 vUv ; void main ( ) { vec3 backgroundColor = vec3 ( 0.8 , 0.8 , 0.8 ) ; vec3 color = vec3 ( 0.0 , 0.65 , 0.97 ) ; float f = texture2D ( tAudioData , vec2 ( vUv . x , 1.0 ) ) . a ; float i2 = step ( vUv . y , f ) * step ( f - 0.0125 , vUv . y ) ; float i1 = step ( vUv . y , f ) ; float i ; if ( style == 1.0 ) { i = i1 ; } else { i = i2 ; } vec3 tt = mix ( backgroundColor , color , i ) ; gl_FragColor = vec4 (

THREE.js how to make transparent front walls in 3d room model

阅读更多关于 THREE.js how to make transparent front walls in 3d room model

问题 I want to make a 3d room in three.js. I want the walls, that are in front of the camera view, to become transparent as I rotate the room. Here is example what i need: http://jsfiddle.net/tp2f2oo4/ It seems that solution is adding THREE.BackSide to the material. var material2 = new THREE.MeshPhongMaterial( { color: 0xffffff, transparent: false, side: THREE.BackSide } ); Indeed this works perfectly when a room acts as a single THREE.BoxGeometry, but in my case, every wall, ceiling, and floor

Rotation When Object is Spinning

阅读更多关于 Rotation When Object is Spinning

问题 [] [] Imagine those are the front tires of a car and they're spinning forward in a straight line. How would I rotate them (in a steering motion) without them being affected by their local (spinning) rotation? 回答1: Add a "wheel" to a THREE.Group() object and rotate the group on y-axis. for(var i = 0; i < wheels.length; i++){ steering[i].rotation.y = Math.sin(new Date() * 0.005) * 0.25; wheels[i].rotation.x += 0.1; } each steering is a THREE.Group(), each wheels is a cylinder. jsfiddle example

Performantly render tens of thousands of spheres of variable size/color/position in Three.js?

阅读更多关于 Performantly render tens of thousands of spheres of variable size/color/position in Three.js?

问题 This question is picking up from my last question where I found that using Points leads to problems: https://stackoverflow.com/a/60306638/4749956 To solve this you'll need to draw your points using quads instead of points. There are many ways to do that. Draw each quad as a separate mesh or sprite, or merge all the quads into another mesh, or use InstancedMesh where you'll need a matrix per point, or write custom shaders to do points (see the last example on this article) I've been trying to

Performantly render tens of thousands of spheres of variable size/color/position in Three.js?

阅读更多关于 Performantly render tens of thousands of spheres of variable size/color/position in Three.js?

Update texture with three.js

阅读更多关于 Update texture with three.js

问题 I've got a textured model in three.js and I want to be able to swap out the texture defined in the .gltf file when the page loads. I've looked here for inspiration. "images": [ { "uri": "flat_baseColor.png" }, // etc So to update the texture I do var images = [ "./textures/01.jpg", // "./textures/01.jpg", ]; var texture = new THREE.TextureLoader().load( images[0] ); var my_material = new THREE.MeshBasicMaterial({map: texture}); // load the model var loader = new GLTFLoader().setPath( 'models

Cannonjs - Change on body position&quaternion not affecting on child shapes

阅读更多关于 Cannonjs - Change on body position&quaternion not affecting on child shapes

问题 I use cannonjs vs three.js . Ussually in three.js it is easy with 3dObject container. I added a lot of bodies and translate/rotate then in circle but now i wanna rotate them all together. Any idea... /* globals CANNON THREE GROUP1 GROUP2 GROUP3 app world scene */ /** From visual JS project */ function orbit(cx, cy, angle, p) { var s = Math.sin(angle); var c = Math.cos(angle); // translate point back to origin: p.x -= cx; p.y -= cy; // rotate point // eslint-disable-next-line no-undef xnew = p

Issue with scene rotation in three js

阅读更多关于 Issue with scene rotation in three js

问题 I try to rotate a scene with children dynamically. everything works fine, but when I pan the camera and rotate scene, the pivot point from the orbit control breaks and pan works not correctly. The main idea is to create the illusion of hdr rotation around objects. Sorry for my english, its really hard to describe, hope you understand my mind. Here a small codepen example var container = document.getElementById('three'); var width = container.offsetWidth; var height = container.offsetHeight;

Materials in exported Blender model for Three.js not working

阅读更多关于 Materials in exported Blender model for Three.js not working

问题 I am trying to use a model created with Blender with Three.js The model is very basic, two cubes on top of each other. One cube is red and the other is green. I have exported the model using the Blender exporter plugin of Three.js When I assign a material manually to the object like: loader.load("model.js", function ( geometry, material ) { material = new THREE.MeshBasicMaterial( { color: 0xFF0000 } ); mesh = new THREE.Mesh( geometry, material); scene.add(mesh); animate(); }); there is no