From 8a3364b0cd057fcfb7f89da112b9032fee76e403 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Patrick=20Sch=C3=B6nberger?= Date: Sat, 6 Feb 2021 10:50:21 +0100 Subject: [PATCH 1/1] restore basic scene in main.js --- Scripts/cloth.js | 3 +- Scripts/main.js | 181 +++++++++++++++++++++++++++++++++++++++++++++++ index.html | 5 +- 3 files changed, 185 insertions(+), 4 deletions(-) diff --git a/Scripts/cloth.js b/Scripts/cloth.js index f1068d4..a05eb98 100644 --- a/Scripts/cloth.js +++ b/Scripts/cloth.js @@ -1,4 +1,3 @@ // cloth rendering // simulate -// setup scene -// orbit controls/skybox/flagge \ No newline at end of file +// setup scene \ No newline at end of file diff --git a/Scripts/main.js b/Scripts/main.js index e69de29..4d87337 100644 --- a/Scripts/main.js +++ b/Scripts/main.js @@ -0,0 +1,181 @@ +//import { } from './cloth.js'; +//import { OrbitControls } from './OrbitControls.js'; + +function addLights(scene){ + scene.add( new THREE.AmbientLight( 0x222222 ) ); + + const light1 = new THREE.PointLight( 0xffffff, 1, 50 ); + light1.position.set( 15, 1, 40 ); + scene.add( light1 ); + + const light2 = new THREE.PointLight( 0xffffff, 1, 50 ); + light2.position.set( -15, 0, 40 ); + scene.add( light2 ); + + const light3 = new THREE.PointLight( 0xffffff, 1, 50 ); + light3.position.set( 0, -1, 40 ); + scene.add( light3 ); +} + +/** + * setup THREE JS Scene, Camera and Renderer + */ +function setup_scene(canvasSpace) { + const scene = new THREE.Scene(); + const camera = new THREE.PerspectiveCamera(75, window.innerWidth / (window.innerHeight - canvasSpace), 0.1, 1000); + const renderer = new THREE.WebGLRenderer(); + /** size canvas to leave some space for UI */ + renderer.setSize(window.innerWidth, window.innerHeight - canvasSpace); + renderer.antialias = true; + /** embed canvas in HTML */ + document.getElementById("threejscontainer").appendChild(renderer.domElement); + + /** add orbit controls */ + const controls = new THREE.OrbitControls(camera, renderer.domElement); + controls.target.set(0, 0, 0); + controls.update(); + + /** add scene background */ + const loader = new THREE.TextureLoader(); + const texture = loader.load( + 'Textures/tears_of_steel_bridge_2k.jpg', + () => { + const rt = new THREE.WebGLCubeRenderTarget(texture.image.height); + rt.fromEquirectangularTexture(renderer, texture); + scene.background = rt; + }); + + /** add flag pole */ + const geometry = new THREE.CylinderGeometry( 0.02, 0.02, 5, 32 ); + const material = new THREE.MeshStandardMaterial( {color: 0xffffff} ); + const cylinder = new THREE.Mesh( geometry, material ); + cylinder.position.set(-0.5, -2.25, 0); + scene.add( cylinder ); + + /** add global light */ + const directionalLight = new THREE.DirectionalLight(0xffffff, 1); + scene.add(directionalLight); + + /** position camera */ + camera.position.z = 2; + addLights(scene); + return [scene, camera, renderer]; +} + +/** call "init" when document is fully loaded */ +document.body.onload = init; + +function init() { + let mousePos = new THREE.Vector2(); + + /** + * Space left empty under canvas + * for UI elements + */ + const canvasSpace = 200; + + /** Constant Frame Time */ + const frameTime = 1000.0 / 60.0; + + /** Setup scene */ + let [scene, camera, renderer] = setup_scene(canvasSpace); + + // Add Cloth Initialization + + let raycaster = new THREE.Raycaster(); + let intersects; + let rightMousePressed; + /** + * function called every frame + * @param {number} dt - time passed since last frame in ms + */ + function animate(dt) { + // simulate cloth + + raycaster.setFromCamera( new THREE.Vector2((mousePos.x / w) * 2 - 1, ((h - mousePos.y) / h) * 2 - 1), camera ); + + // intersects = raycaster.intersectObject( mesh ); + + // if ( intersects.length > 0 && rightMousePressed) { + // // Cloth mouse interaction + // } + setTimeout(() => { + animate(frameTime); + }, frameTime); + renderer.render(scene, camera); + } + + + /** add callback for window resize */ + let canvas = document.getElementsByTagName("canvas")[0]; + let w = window.innerWidth; + let h = window.innerHeight - canvasSpace; + let resize = function () { + w = window.innerWidth; + h = window.innerHeight - canvasSpace; + canvas.width = w; + canvas.height = h; + } + window.onresize = resize; + resize(); + + /** + * if canvas has been successfully initialized + * start rendering + */ + if (canvas.getContext) { + animate(performance.now()); + } + + + + /** add mouse move callback */ + canvas.onmousemove = (evt) => { + mousePos.x = evt.clientX; + mousePos.y = evt.clientY; + + //cloth.mouseMove(calculateMousePosToWorld(evt)); + }; + + /** + * Prevent context menu while blowing wind + */ + canvas.addEventListener('contextmenu', function(evt) { + evt.preventDefault(); + }, false); + + + canvas.onmousedown = (evt) => { + + // Check mouse click + rightMousePressed = evt.button == 2; + + if(intersects.length > 0 && evt.button == 0){ + //cloth.mousePress(intersects); + } + } + + canvas.onmouseup = (evt) => { + //cloth.mouseRelease(); + rightMousePressed = false; + } + + function calculateMousePosToWorld(evt){ + var vec = new THREE.Vector3(); // create once and reuse + var pos = new THREE.Vector3(); // create once and reuse + + vec.set( + ( evt.clientX / window.innerWidth ) * 2 - 1, + - ( evt.clientY / window.innerHeight ) * 2 + 1, + 0.5 ); + + vec.unproject( camera ); + + vec.sub( camera.position ).normalize(); + + var distance = - camera.position.z / vec.z; + + pos.copy( camera.position ).add( vec.multiplyScalar( distance ) ); + return pos; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 7abe428..20f3ed0 100644 --- a/index.html +++ b/index.html @@ -10,12 +10,13 @@ } - - + + +
Wind -- 2.50.1