Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.