Example Analysis of three.js in WebGL
Editor to share with you the example analysis of three.js in WebGL, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
1 、 WebGL
3D graphics can be displayed on the browser side
2 、 three.js
On the basis of WebGL, package again. It works better. The relationship between the two is equivalent to that between Js and jquery.
3. Basic user experience
Three floor, cube, sphere
* {
Margin: 0
Padding: 0
}
Function init () {
/ / 1. Create a scene
Let scene = new THREE.Scene ()
/ / 2. Create a camera
Let camera = new THREE.PerspectiveCamera (45 century window.innerWidthstop window.innerHeightmemo0.1and2000)
/ / 3. Create the renderer
Let renderer = new THREE.WebGLRenderer ()
/ / set the initial color of the renderer
Renderer.setClearColor (new THREE.Color (0xEEEEEE))
/ / set the canvas canvas size
Renderer.setSize (window.innerWidth,window.innerHeight)
Renderer.shadowMapEnabled = true
/ / set 3D coordinate system
Let axis = new THREE.AxesHelper (20)
/ / coordinate system is added to the scene
Scene.add (axis)
/ / 4. Create a floor model and color it
Let planeMat = new THREE.PlaneGeometry (60 and 20)
Let planeCol = new THREE.MeshBasicMaterial ({color:0xcccccc})
Let plane = new THREE.Mesh (planeMat,planeCol)
Plane.receiveShadow = true
/ / ground is added to the scene
Plane.rotation.x =-0.5*Math.PI
Scene.add (plane)
/ / 5. Create a cube
Let cubeMat = new THREE.BoxGeometry (4pm 4pm 4)
Let cubeCol = new THREE.MeshLambertMaterial ({color:0x66cc00})
Let cube = new THREE.Mesh (cubeMat,cubeCol)
Cube.position.x = 4
Cube.position.y = 0
Cube.position.z = 4
Cube.castShadow = true; / / Cube add Shadow
/ / 5. Create a sphere
Let sphereMat = new THREE.SphereGeometry (4, 20, 20)
Let sphereCol = new THREE.MeshLambertMaterial ({color:0x21cc10})
Let sphere = new THREE.Mesh (sphereMat,sphereCol)
Sphere.position.x = 10
Sphere.position.y = 4
Sphere.position.z = 0
Sphere.castShadow = true; / / add Shadow
/ / add a spotlight
Let spotLight = new THREE.SpotLight (0xFFFFFF)
SpotLight.position.set (30, 10, 20, 10)
SpotLight.castShadow = true
Scene.add (spotLight)
Scene.add (cube,sphere)
/ / 6. Rendering
/ / position the camera and point to the scene
Camera.position.x =-20
Camera.position.y = 30
Camera.position.z = 30
Camera.lookAt (scene.position)
/ /
Document.getElementById ("webGL-output") .appendChild (renderer.domElement)
Renderer.render (scene,camera)
}
_ window.onload = init
The above is all the content of the article "sample Analysis of three.js in WebGL". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
