JSFiddle - React, Tailwind, and code Playground
HTML
<p id="egg" class="zI">
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
JavaScript
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
let renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.setSize(innerWidth, innerHeight);
renderer.domElement.className = 'deadstar';
const a = document.getElementById('egg')
a.appendChild(renderer.domElement);
let controls = new THREE.OrbitControls(camera, renderer.domElement);
let tex = new THREE.TextureLoader().load(
"https://solarsystemmm.github.io/3D/texture-moon.png"
);
tex.minFilter = THREE.LinearFilter;
let sphereGeom = new THREE.SphereBufferGeometry(0.7, 32, 32);
let innerSphere = new THREE.Mesh(
sphereGeom,
new THREE.MeshLambertMaterial({
map: tex,
})
);
innerSphere.scale.set(4, 4.3, 4);
scene.add(innerSphere);
window.addEventListener("mousemove", rotating, false);
let rotationFactorY = 0.08;
let rotationFactorX = 0.08;
const maxRotationSpeed = 0.1;
function rotating(e) {
rotationFactorY = 0.2 * (e.clientX - window.innerWidth / 2) / window.innerWidth;
rotationFactorX = 0.2 * (e.clientY - window.innerHeight / 2) / window.innerHeight;
}
// не работает!
// var dragControls = new THREE.DragControls(innerSphere, camera, renderer.domElement);
// dragControls.addEventListener('dragstart', function (event) {
// console.log(event)
// });
let light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.y = window.innerHeight / 2;
light.position.z = window.innerHeight / 1.4;
scene.add(light);
renderer.setAnimationLoop(() => {
innerSphere.rotation.y += maxRotationSpeed * rotationFactorY;
...