next.js与three.js的碰撞

我将已有的程序移动到next.js中出现了一些问题

1.最常见的 window is not defined 因为next是服务端 没有window对象 浏览器加载后才有window对象 需要将使用window的地方换到useEffect或其他地方
例如 初始化相机时使用了window对象

const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 3000);

需要

document is not define也是如此

export const stats = new Stats();
document.body.appendChild(stats.dom);

2 three__WEBPACK_IMPORTED_MODULE_0__.Clock is not a constructor有趣的问题 不论怎么使用Clock对象都没问题 这居然报错 不是一个构造函数 查询stackoverflow后尝试从clock源文件出导入 结果成功three-js-typeerror-three-scene-is-not-a-constructor

即

import { Clock } from "three/src/core/Clock";

而不是

import {Clock} from "three";
//or
import * as THREE from "three";
cosnt clock = new THREE.Clock()