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