Actually I never uploaded a repository and first I need to learn how to manage a GitHub Profile. However I will upload it tomorrow, but for now I show you the ThreeJsObject.js code here:
import React, { Component } from 'react';
import './ThreeJsObject.css';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import * as dat from 'dat.gui';
import { PointLightHelper } from 'three';
import { OBJLoader } from './resources/threejs/r127/examples/jsm/loaders/OBJLoader.js';
import { MTLLoader } from './MTLLoader.js';
OBJLoader(three);
class ThreeJsObject extends Component {
constructor(props) {
super(props)
}
render () {
return (
<canvas className='webgl'></canvas>
)
}
componentDidMount () {
const textureLoader = new THREE.TextureLoader ()
// Threejs 3DObject Code
const normalTexture = textureLoader.load('./static/textures/NormalMap.png')
// Debug
const gui = new dat.GUI()
// Canvas
const canvas = document.querySelector('canvas.webgl')
// Scene
const scene = new THREE.Scene()
// Obj 3D Object Loader
var MTLLoader = new THREE.MTLLoader();
MTLLoader.setPath("../public/threejs/")
MTLLoader.load("../public/threejs/among-us.mtl", function (material) {
material.preload()
var OBJLoader = new THREE.OBJLoader();
OBJLoader.setMaterials(material);
OBJLoader.setPath("../public/threejs");
OBJLoader.load("among-us.obj", function (object) {
scene.add(object);
object.position.y -=60;
});
});
/*
{
const objLoader = new OBJLoader();
objLoader.load('../public/threejs/among-us.obj', (root) => {
scene.add(root);
});
}
*/
// Materials
const material = new THREE.MeshStandardMaterial()
material.metalness= 0.2
material.metalness= 38.81
material.normalMap= normalTexture
material.color = new THREE.Color(0x3333ff)
gui.add(material, 'metalness').min(0).max(100).step(0.01)
// Mesh
const sphere = new THREE.Mesh(geometry,material)
scene.add(sphere)
// Light 01
const pointLight1 = new THREE.PointLight(0xffffff, 2.1)
pointLight1.position.set(-0,92,0.53,1.39)
pointLight1.intensity = 1
scene.add(pointLight1)
const light1 = gui.addFolder('Light 1')
light1.add(pointLight1.position, 'x').min(-3).max(3).step(0.01)
light1.add(pointLight1.position, 'y').min(-3).max(3).step(0.01)
light1.add(pointLight1.position, 'z').min(-3).max(3).step(0.01)
light1.add(pointLight1, 'intensity').min(0).max(10).step(0.01)
const light1Color = {
color: 0xc9c9c9
}
light1.addColor(light1Color, 'color')
.onChange(() => {
pointLight1.color.set(light1Color.color)
})
// Light 02
const pointLight2 = new THREE.PointLight(0x3333ff, 1.1)
pointLight2.position.set(0.8,0,0.73)
pointLight2.intensity = 10
scene.add(pointLight2)
const light2 = gui.addFolder('Light 2')
light2.add(pointLight2.position, 'x').min(-3).max(3).step(0.01)
light2.add(pointLight2.position, 'y').min(-3).max(3).step(0.01)
light2.add(pointLight2.position, 'z').min(-3).max(3).step(0.01)
light2.add(pointLight2, 'intensity').min(0).max(10).step(0.01)
const light2Color = {
color: 0xff84
}
light2.addColor(light2Color, 'color')
.onChange(() => {
pointLight2.color.set(light2Color.color)
})
// Light 03
const pointLight3 = new THREE.PointLight(0x00ff99, 1.1)
pointLight3.position.set(3,-3,-0.13)
pointLight3.intensity = 10
scene.add(pointLight3)
const light3 = gui.addFolder('Light 3')
light3.add(pointLight3.position, 'x').min(-3).max(3).step(0.01)
light3.add(pointLight3.position, 'y').min(-3).max(3).step(0.01)
light3.add(pointLight3.position, 'z').min(-3).max(3).step(0.01)
light3.add(pointLight3, 'intensity').min(0).max(10).step(0.01)
const light3Color = {
color: 0xff00c6
}
light3.addColor(light3Color, 'color')
.onChange(() => {
pointLight3.color.set(light3Color.color)
})
const pointLightHelper = new THREE.PointLightHelper(pointLight3, 1)
scene.add(pointLightHelper)
/**
* Sizes
*/
const sizes = {
width: window.innerWidth,
height: window.innerHeight
}
window.addEventListener('resize', () =>
{
// Update sizes
sizes.width = window.innerWidth
sizes.height = window.innerHeight
// Update camera
camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix()
// Update renderer
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})
/**
* Camera
*/
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.x = 0
camera.position.y = 0
camera.position.z = 2
scene.add(camera)
// Controls
// const controls = new OrbitControls(camera, canvas)
// controls.enableDamping = true
/**
* Renderer
*/
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
alpha: true
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
/**
* Animate
*/
document.addEventListener('mousemove', onDocumentMouseMove)
let mouseX = 0;
let mouseY = 0;
let targetX = 0;
let targetY = 0;
const windowX = window.innerWidth / 2;
const windowY = window.innerHeight / 2;
function onDocumentMouseMove(event) {
mouseX = (event.clientX - windowX)
mouseY = (event.clientY - windowY)
}
const updateSphere = (event) => {
sphere.position.y = window.scrollY * .001
}
window.addEventListener('scroll', updateSphere);
const clock = new THREE.Clock()
const tick = () =>
{
targetX = mouseX * .002
targetY = mouseY * .002
const elapsedTime = clock.getElapsedTime()
// Update objects
sphere.rotation.y = .5 * elapsedTime
sphere.rotation.y += .5 * (targetX - sphere.rotation.y)
sphere.rotation.x += .05 * (targetY - sphere.rotation.x)
sphere.position.z += -.05 * (targetY - sphere.rotation.x)
// Update Orbital Controls
// controls.update()
// Render
renderer.render(scene, camera)
// Call tick again on the next frame
window.requestAnimationFrame(tick)
}
tick()
}
}
// Loading
export default ThreeJsObject;
