Sunday, September 27, 2020

ThreeJS how to create a Plane, and a sphere, box sit on top of it

Basically need to Create BoxGeometry, ShereGeometry and a PlaneGeometry 

Below is the basic code for it. 




<script type="module">


import * as THREE from './threejs/build/three.module.js';


import { GUI } from './threejs/examples/jsm/libs/dat.gui.module.js';


import { OrbitControls } from './threejs/examples/jsm/controls/OrbitControls.js';


var renderer, scene, camera;


var spotLight, lightHelper, shadowCameraHelper;


var gui;


renderer = new THREE.WebGLRenderer();

renderer.setPixelRatio(window.devicePixelRatio);

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);


camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 300, 10000);


scene = new THREE.Scene();


//LIGHTS 

var light = new THREE.AmbientLight(0xfffff, 0.5);

scene.add(light);


var light2 = new THREE.PointLight(0xffffff, 0.5);

scene.add(light2);


var material = new THREE.MeshBasicMaterial({

color: 0xff0000,

transparent: true,

opacity: 1,

wireframe: true

});


var geometry = new THREE.BoxGeometry(100, 100, 100);

var mesh = new THREE.Mesh(geometry, material);

mesh.position.z = -1000;

mesh.position.x = -100;

scene.add(mesh);


var geometry2 = new THREE.SphereGeometry(50, 20, 20);

var mesh2 = new THREE.Mesh(geometry2, material);

mesh2.position.z = -1000;

mesh2.position.x = -100;

scene.add(mesh2);


var geometry3 = new THREE.PlaneGeometry(10000, 1000, 100, 100);

var mesh3 = new THREE.Mesh(geometry3, material);

mesh3.rotation.x = -90 * Math.PI / 180;

mesh3.position.y = -100;

scene.add(mesh3);


render();


function render() {

mesh.rotation.x += 0.01;

mesh.rotation.y += 0.01;


renderer.render(scene, camera);

requestAnimationFrame(render);

}



</script>


References:

https://www.youtube.com/watch?v=HsE_7C1tRTo&list=PL08jItIqOb2qyMOhtEUoLh100KpccQiRf&index=4


No comments:

Post a Comment