Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- var scene = new THREE.Scene();
- var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
- var renderer = new THREE.WebGLRenderer();
- renderer.setClearColor(0xeeeeee, 1.0);
- renderer.setSize(window.innerWidth, window.innerHeight);
- var webglContainer = document.getElementById('webgl-container');
- webglContainer.appendChild(renderer.domElement);
- // camera controls
- var camControls = new THREE.OrbitControls(camera, renderer.domElement);
- camControls.damping = 0.2;
- camControls.addEventListener('change', render);
- // window resize handler
- window.addEventListener('resize', onWindowResize, false);
- function onWindowResize() {
- camera.aspect = window.innerWidth / window.innerHeight;
- camera.updateProjectionMatrix();
- renderer.setSize(window.innerWidth, window.innerHeight);
- render();
- }
- var axes = new THREE.AxisHelper(20);
- scene.add(axes);
- var grid = new THREE.GridHelper(40, 1);
- // create the ground plane
- var planeGeometry = new THREE.PlaneGeometry(80, 80, 10, 10);
- var planeMaterial = new THREE.MeshLambertMaterial({
- color: 0xffffff
- });
- var plane = new THREE.Mesh(planeGeometry, planeMaterial);
- plane.rotation.x = -0.5 * Math.PI;
- plane.position.x = 0;
- plane.position.y = -0.05;
- plane.position.z = 0;
- scene.add(plane);
- // ---- 3D CONTENT CREATION -----------------------------------------------------
- var mesh;
- var mat = new THREE.MeshLambertMaterial({color: document.getElementById('mesh-color').value});
- var loader = new THREE.OBJLoader();
- var geometryParts = [];
- loader.load('assets/mech2_4.obj', function (geometry, materials) {
- console.log(geometry);
- console.log(materials);
- geometry.traverse(function (child) {
- if (child instanceof THREE.Mesh) {
- // apply custom material
- child.material = mat;
- }
- });
- geometry.updateFromColorPicker = function () {
- var newMat = new THREE.MeshLambertMaterial({color: document.getElementById('mesh-color').value});
- geometry.traverse(function (child) {
- if (child instanceof THREE.Mesh) {
- // apply custom material
- child.material = newMat;
- }
- });
- }
- geometry.position.x = 0;
- geometry.position.y = 7;
- geometry.position.z = 0;
- geometry.scale.set(1, 1, 1);
- geometryParts[geometry.name] = geometry;
- var partSelector = document.getElementById("partSelector");
- var option = document.createElement("option");
- option.text = geometry.name;
- partSelector.add(option);
- scene.add(geometry);
- });
- // ---- END OF 3D CONTENT CREATION ---------------------------------------------
- // position and point the camera to the center of the scene
- camera.position.x = -35;
- camera.position.y = 40;
- camera.position.z = 60;
- camera.lookAt(scene.position);
- // add subtle ambient lighting
- var ambientLight = new THREE.AmbientLight(0x222222);
- scene.add(ambientLight);
- // add spotlight
- var spotLight = new THREE.SpotLight(0xffffff);
- spotLight.position.set(-80, 70, 90);
- scene.add(spotLight);
- // add GUI control elements
- var guiControls = new function () {
- this.showAxes = true;
- this.showGrid = false;
- this.showPlane = true;
- this.asWireframes = false;
- this.animated = true;
- this.withShadow = false;
- this.withFog = false;
- }
- var gui = new dat.GUI({
- autoPlace: false
- });
- var guiContainer = document.getElementById('gui-container');
- guiContainer.appendChild(gui.domElement);
- gui.add(guiControls, 'showAxes').onChange(function (e) {
- showAxes = e;
- if (showAxes) {
- scene.add(axes);
- } else {
- scene.remove(axes);
- }
- render();
- });
- gui.add(guiControls, 'showGrid').onChange(function (e) {
- showGrid = e;
- if (showGrid) {
- scene.add(grid);
- } else {
- scene.remove(grid);
- }
- render();
- });
- gui.add(guiControls, 'showPlane').onChange(function (e) {
- showPlane = e;
- if (showPlane) {
- scene.add(plane);
- } else {
- scene.remove(plane);
- }
- render();
- });
- gui.add(guiControls, 'asWireframes').onChange(function (e) {
- asWireframes = e;
- // TODO: for all material.wireframe = asWireframes;
- mat.wireframe = asWireframes;
- render();
- });
- gui.open();
- // init and call render function
- function render() {
- renderer.render(scene, camera);
- }
- initAnim(true);
- initShadow(false);
- initFog(false);
- render();
- setShadow(false);
- setFog(false);
- animate();
- // animate the 3D objects
- function initAnim(value) {
- if (value) {
- gui.add(guiControls, 'animated').onChange(function (e) {
- animated = e;
- if (animated)
- animate();
- });
- }
- }
- var step = 0;
- var scalingStep = 0;
- function animate() {
- if (guiControls.animated) {
- // DO ANIMATING 3D ELEMENTS
- // request re-rendering
- requestAnimationFrame(animate);
- }
- render();
- }
- // shadow cast on plane
- function initShadow(value) {
- // SET receiveShadow AND castShadow FLAGS OF 3D ELEMENTS WITH SHADOW
- plane.receiveShadow = value;
- spotLight.castShadow = value;
- renderer.shadowMapEnabled = value;
- if (value) {
- gui.add(guiControls, 'withShadow').onChange(function (e) {
- withShadow = e;
- setShadow(withShadow);
- });
- }
- }
- function setShadow(value) {
- if (value) {
- renderer.shadowMapAutoUpdate = true;
- } else {
- renderer.shadowMapAutoUpdate = false;
- renderer.clearTarget(spotLight.shadowMap);
- }
- render();
- }
- // fog
- var fog;
- function initFog(value) {
- if (value) {
- fog = new THREE.Fog(0xeeeeee, 0.0000001, 150);
- scene.fog = fog;
- gui.add(guiControls, 'withFog').onChange(function (e) {
- withFog = e;
- setFog(withFog);
- });
- }
- }
- function setFog(value) {
- if (!fog)
- return;
- if (value) {
- fog.near = 0.000000001;
- fog.far = 150;
- } else {
- fog.near = 8000;
- fog.far = 8000;
- }
- render();
- }
- function updateColorChoice() {
- var index = document.getElementById('partSelector').value;
- console.log(index);
- console.log(geometryParts);
- geometryParts[index].updateFromColorPicker();
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement