Three.js | 3DE Code Editor | Making Shapes
Three.js: making Shapes
Use code3games for a quick online editor. Copy the text into your editor as many times as you need till it comes to you as second nature.<body></body> <script src="/three.js"></script> <script> // var scene = new THREE.Scene(); var flat = {flatShading: true}; var light = new THREE.AmbientLight('white', 0.8); scene.add(light); // var aspectRatio = window.innerWidth / window.innerHeight; var camera = new THREE.PerspectiveCamera(75, aspectRatio, 1, 10000); camera.position.z = 500; scene.add(camera); // var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var geometry = new THREE.SphereGeometry(100, 30 , 30); var material = new THREE.MeshBasicMaterial(flat); var ball = new THREE.Mesh(geometry, material); scene.add(ball); var geometry = new THREE.BoxGeometry(200, 300 , 30) var material = new THREE.MeshBasicMaterial(flat); var cube = new THREE.Mesh(geometry, material); cube.rotation.set(3.14/4,3.14/4,3.14/4); cube.position.set(50,0,0); scene.add(cube); renderer.render(scene, camera); </script>
// The "camera" is what sees the stuff: var aspectRatio = window.innerWidth / window.innerHeight; var camera = new THREE.PerspectiveCamera(75, aspectRatio, 1, 10000); camera.position.z = 500; scene.add(camera); // The "renderer" draws what the camera sees onto the screen: var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // ******** START CODING ON THE NEXT LINE ******** var body = new THREE.SphereGeometry(100); var cover = new THREE.MeshNormalMaterial(); var avatar = new THREE.Mesh(body, cover) scene.add(avatar); var hand = new THREE.SphereGeometry(50); var rightHand = new THREE.Mesh(hand, cover); rightHand.position.set(-130,0,0); avatar.add(rightHand); var leftHand = new THREE.Mesh(hand, cover); leftHand.position.set(+130,0,0); avatar.add(leftHand); var foot = new THREE.SphereGeometry(50); var leftFoot = new THREE.Mesh(foot, cover); leftFoot.position.set(-75,-125,0); avatar.add(leftFoot); var rightFoot = new THREE.Mesh(foot, cover); rightFoot.position.set(+75,-125,0); avatar.add(rightFoot); var isCartwheeling = true; var rotx = 0 var roty = 0 var rotz = 0 function animate(){ requestAnimationFrame(animate) if (isCartwheeling) { rotx += 0.00 roty += 0.01 rotz += 0.00 avatar.rotation.set(rotx,roty,rotz); } renderer.render(scene, camera) } animate() // Now, show what the camera sees on the screen: renderer.render(scene, camera); </script>
Constructors
SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength) radius: Float — Default is 1. widthSegments : Integer — Minimum 3, default 32. heightSegments : Integer — Minimum 2, default 16. phiStart : Float — horizontal starting angle. Default is 0. phiLength : Float — horizontal sweep angle size. Default is Math.PI * 2. thetaStart : Float — specify vertical starting angle. Default is 0. thetaLength : Float — specify vertical sweep angle size. Default is Math.PI.
BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments) width : Float height : Float depth : Float widthSegments : Integer heightSegments : Integer depthSegments : Integer
MeshNormalMaterial( parameters : Object ) Parameters Properties .bumpMap : Texture .bumpScale : Float .displacementMap : Texture .displacementScale : Float .displacementBias : Float .flatShading : Boolean - Default is false. .fog : Boolean - Default is false. .normalMap : Texture .normalMapType : Integer: The type of normal map. Options are THREE.TangentSpaceNormalMap (default) THREE.ObjectSpaceNormalMap. .normalScale : Vector2 How much the normal map affects the material. Typical ranges are 0-1. Default is a Vector2 set to (1,1). .wireframe : Boolean Default is false .wireframeLinewidth : Float Default is 1.
11apr23 | admin |