Typescript improved-noise

Questions
1

Hi guys,

I have some errors with the improved noise. It still creates the shape but have some errors “Property ‘usage’ does not exist on type ‘BufferAttribute | InterleavedBufferAttribute’. Property ‘usage’ does not exist on type ‘InterleavedBufferAttribute’.ts(2339)” Could you help me how to correct this?

p-error
p-error1757×872 152 KB 

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import Stats from 'three/examples/jsm/libs/stats.module.js';
import {ImprovedNoise} from 'three/examples/jsm/math/ImprovedNoise.js'

const w = window.innerWidth;
const h = window.innerHeight;
const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x000000, 0.18);
const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000);
camera.position.z = 4;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(w, h);
document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.update();

function getBall() {
  const radius = 2;
  const geometry = new THREE.IcosahedronGeometry(radius, 24);
  const material = new THREE.MeshNormalMaterial({
    // wireframe: true,
    flatShading: true,
  });
  const mesh = new THREE.Mesh(geometry, material);
  const noise = new ImprovedNoise();

  let v3 = new THREE.Vector3();
  let p = new THREE.Vector3();
  let pos = geometry.attributes.position;
  pos.usage = THREE.DynamicDrawUsage; // the 'usage' is the error
  const len = pos.count;

  
const stats = Stats()
document.body.appendChild(stats.dom)

  function update(t) {
    for (let i = 0; i < len; i += 1) {
      p.fromBufferAttribute(pos, i).normalize();
      v3.copy(p).multiplyScalar(3);
      let ns = noise.noise(v3.x + Math.cos(t), v3.y + Math.sin(t), v3.z + t);
      v3.copy(p)
        .setLength(radius)
        .addScaledVector(p, ns * 2);
      pos.setXYZ(i, v3.x, v3.y, v3.z);
    }
    pos.needsUpdate = true;
  }
  return {
    mesh,
    update,
  };
}

const ball = getBall();
scene.add(ball.mesh);

const timeMult = 0.00;
function animate() {
  requestAnimationFrame(animate);

  ball.update( timeMult);

  renderer.render(scene, camera);
}

animate();
2

assert your pos in your line 33 as a THREE.BufferAttribute.

I.e.,
;(pos as THREE.BufferAttribute).usage = THREE.DynamicDrawUsage;

That’s because, geometry.attributes.position in line 32, can be either THREE.BufferAttribute | THREE.InterleavedBufferAttribute and THREE.InterleavedBufferAttribute doesn’t have a usage property.

image

Also your line 39 can updated to be
function update(t: number) {

Also, you had const timeMult = 0.0 which doesn’t cause much to happen.
If you update the end of your code to be this below, it will animate much nicer.

const clock = new THREE.Clock()
function animate() {
    requestAnimationFrame(animate)
    ball.update(clock.getElapsedTime())
    renderer.render(scene, camera)
}
animate()

test

1 Like
3

Fantastic. Thank you for your time and your help.