JSFiddle - React, Tailwind, and code Playground
CSS
body {
text-align: center;
}
canvas {
width: 100%;
height: 100%;
border: 1px solid black;
background-color:black;
}
JavaScript
var mouseX = 0;
var mouseY = 0;
var dz = 3;
var mod_dz = dz;
var dx = 6;
var mod_dx = dx;
var stickLenX=80;
//ball
var R = 10;
var ballz=0;
//plane
PLANE_X = 300;
PLANE_Y = 20;
PLANE_Z = 400;
var scene = new THREE.Scene(); // Create a Three.js scene object
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // Define the perspective camera's attributes
var renderer = window.WebGLRenderingContext ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); // Set the size of the WebGL view.
document.body.appendChild(renderer.domElement); // Append the WebGL view to the DOM.
//1st stick USER
var geometry = new THREE.CubeGeometry(stickLenX, 20, 20); // Create a 80 by 20 by 20 cuboid stick.
//var material = new THREE.MeshNormalMaterial();// give different color to each face
//THE PROBLEM
var material = new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x0033ff, specular: 0x555555, shininess: 30 } );
var myStick = new THREE.Mesh(geometry, material); // Create a mesh based on the specified geometry (myStick) and material (normal).
scene.add(myStick); // at (0,0,0)
//2nd stick CPU
var cpuStick = new THREE.Mesh(geometry, material); // Create a mesh based on the specified geometry (cpuStick) and material (normal).
scene.add(cpuStick); // at (0,0,0)
//plane
var material = new THREE.MeshBasicMaterial({
color: 0x3D7826 // give green color to the base plane
});
var geometry = new THREE.CubeGeometry(PLANE_X, PLANE_Y, PLANE_Z);
var plane = new THREE.Mesh(geometry, material); // Create a mesh based on the specified geometry (plane) and material (green).
scene.add(plane); // at(0,0,0)
//ball
var material = new THREE.MeshNormalMaterial(); // normal material
var geometry = new THREE.SphereGeometry(R, 64, 64); // Inputs are Radius size, number of vertical segments, number of horizontal rings.
var sphere = new THREE.Mesh(geometry, material); // Create a...