Issue
Why am I unable to rotate the angle of an object? (scene.rotation.x += 0.03;)
The camera can, but the scene object cannot.
I've searched for a solution for a long time without success.
Here is my code:
import * as THREE from 'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="54203c26313114647a6566627a65">[email protected]</a>/build/three.module.js'
import { OrbitControls } from 'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6a2bea4b3b396e6f8e7e4e0f8e7">[email protected]</a>/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="582c302a3d3d186876696a6e7669">[email protected]</a>/examples/jsm/loaders/GLTFLoader.js'
const canvas = document.querySelector('.fan1') // it is my class
const scene = new THREE.Scene()
var ourObj;
const loader = new GLTFLoader()
//load glb file
loader.load('assets/fan.glb', function (glb) {
const root = glb.scene;
root.scale.set(10,10,10)
scene.add(root);
}, function (xhr) { //xhr
console.log("xhr");
}, function (error) { //error
console.log("error");
})
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(2, 2, 5);
scene.add(light);
const size = {
width: window.innerWidth,
height: window.innerHeight
}
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(0, 1, 3);
scene.add(camera);
const renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true,
canvas: canvas
})
renderer.setClearColor("#DDDDDD");
renderer.setSize(size.width, size.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
var render = function () {
requestAnimationFrame(render);
scene.rotation.x += 0.03;
renderer.render(scene, camera);
};
render()
Error: Control _x is not valid