Created
February 9, 2022 17:14
-
-
Save amancioandre/2e271c3e0e24b5a1126bae63f28ebaf2 to your computer and use it in GitHub Desktop.
ThreeJS testing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import './style.css' | |
import * as THREE from 'three' | |
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js' | |
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' | |
//import * as path from 'path' | |
//const path = require('path') | |
// Scene. | |
var camera, scene, renderer, light; | |
var orbitControls; | |
// Box | |
// const geometry = new THREE.BoxGeometry( 1,1,1 ) | |
// const material = new THREE.MeshBasicMaterial( {color:'red'} ) | |
// const mesh = new THREE.Mesh( geometry, material ) | |
// mesh.position.x = 0.6 | |
// mesh.position.set() | |
// const pos = new THREE.Vector3( 1, 1, 1 ) | |
// mesh.position.copy(pos) | |
// scene.add( mesh ) | |
// Camera | |
// const camera = new THREE.PerspectiveCamera( 45, sizes.width/sizes.height, 1, 10000 ) | |
// camera.position.set(3,3,3) | |
// camera.lookAt(new THREE.Vector3(0,0,0)) | |
// scene.add( camera ) | |
// Axes Helper | |
// const axesHelper = new THREE.AxesHelper(1) | |
// scene.add(axesHelper) | |
function init() { | |
// Camera. | |
const fov = 45; | |
const aspect = window.innerWidth / window.innerHeight; | |
const near = 0.1; | |
const far = 2000; | |
camera = new THREE.PerspectiveCamera(fov, aspect, near, far); | |
camera.position.set(0, 0, 500); | |
const canvas = document.querySelector('#cnv'); | |
renderer = new THREE.WebGLRenderer( { canvas } ); | |
renderer.setClearColor(0xf0f0f0); | |
renderer.setPixelRatio( window.devicePixelRatio ); | |
renderer.setSize( window.innerWidth, window.innerHeight ); | |
document.body.appendChild( renderer.domElement ); | |
// Orbit controls. | |
orbitControls = new OrbitControls(camera, renderer.domElement); | |
orbitControls.enablePan = true; | |
orbitControls.enableKeys = false; | |
orbitControls.update(); | |
orbitControls.addEventListener('change', render); | |
// Adding orbit controls to camera (expected by AMI image widgets). | |
camera.controls = orbitControls; | |
// Scene. | |
scene = new THREE.Scene(); | |
// Lights. | |
light = new THREE.PointLight(0xffffff, 1.5); | |
light.position.set(-600, 600, 1000); | |
scene.add(light); | |
// Mesh | |
const loader = new GLTFLoader() | |
loader.load ( | |
'/assets/meshes/superman.glb', | |
function (glb) | |
{ | |
console.log("test") | |
console.log(glb) | |
// glb.scene.scale.set(1000,1000,1000) | |
glb.scene.position.set(0,0,0) | |
scene.add(glb.scene) | |
console.log(scene) | |
} | |
) | |
} | |
function render() { | |
renderer.render(scene, camera) | |
} | |
init() | |
render() | |
window.addEventListener('load', (event) => { | |
console.log("LOADED") | |
console.log(scene) | |
renderer.render( scene, camera ) | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment