佳悦 2016-06-04 02:42 采纳率: 0%
浏览 1124

为什么页面什么也没有

 <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>webgl three.js first</title>
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/three.js/r77/three.min.js"></script>
    <!--<script src="bower_components/jquery/dist/jquery.js"></script>-->
    <!--<script src="bower_components/three.js/three.js"></script>-->
    <script>
        $(function(){
            var scene=new THREE.object();
            var  camera=new THREE.perspective(
                    45,window.innerHeight/window.innerWidth,0.1,1000
            );
            var renderer=new THREE.WebGLRenderer()
            var backgroundcolor=new THREE.Color(0xEEEEE)
            renderer.setClearColor(backgroundcolor);
            renderer.setSize(window.innerHeight/window.innerWidth)
            var planeGeometry=new THREE.planeGeometry(60,20)
            var planeMaterial=new THREE.MeshBasicMaterial(
                    {
                        color:0xcccccc;
                    }
            )
            var plane=new THREE.Mesh(planeGeometry,planeMaterial)
            plane.rotation.x=-.5*Math.PI
            plane.position.x=15
            plane.position.y=0
            plane.position.z=0
            scene.add(plane)
        var cubeGeometry=new THREE,BoxGeometry(2,3,4)
        var cubeMaterial=new THREE.MeshBasicMaterial(
                {
                    color:0xff0000
                    wireframe:true
                }
        }
        )
        var cube=new THREE.Mesh(cubeGeometry,cubeMaterial)
        cube,position.x=4
        cube.position.y=2
        cube.posistion z=3
        scene.add(cube)
//        var squareGeometry=new THREE.squareGeometry(5)
        var squareGeometry=new THREE.SpereGeometry(4,20,20)
        var squareMaterial=new THREE.MeshBasicMaterial(
                {
                    color:0xff0000
                    wireframe:false
                }
        )
        var square=new THREE.Mesh(squareGeometry,squareMaterial)
        square,position.x=25
        square.position.y=40
        square.position.z=30
        scene.add(square)

        camera.position.x=-5
        camera.position.y=6
        camera.position.z=10
        camera LookAt(scene.position)
        $(document.body).append(renderer.domElement)
        renderer.render(scene,camera)
    </script>
    <style>
        body{
            margin: 0;
            overflow: hidden;
        }
        </style>
</head>
<body>

</body>
  • 写回答

1条回答 默认 最新

  • Go 旅城通票 2016-06-04 04:51
    关注

    一堆语法错误，json少逗号，该逗号的地方又没有。多学点js基础，而且这个插件怎么用的自己看api，下面语法没有错误了，但是THREE.object报错

    如果本地fiel浏览，要加上http协议，要不无法加载网络资源

     <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>webgl three.js first</title>
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/three.js/r77/three.min.js"></script>
    <!--<script src="bower_components/jquery/dist/jquery.js"></script>-->
    <!--<script src="bower_components/three.js/three.js"></script>-->
    <script>
        $(function () {
            var scene = new THREE.object();
            var camera = new THREE.perspective(
                    45, window.innerHeight / window.innerWidth, 0.1, 1000
            );
            var renderer = new THREE.WebGLRenderer()
            var backgroundcolor = new THREE.Color(0xEEEEE)
            renderer.setClearColor(backgroundcolor);
            renderer.setSize(window.innerHeight / window.innerWidth)
            var planeGeometry = new THREE.planeGeometry(60, 20)
            var planeMaterial = new THREE.MeshBasicMaterial(
                    {
                        color: 0xcccccc////;
                    }
            )
            var plane = new THREE.Mesh(planeGeometry, planeMaterial)
            plane.rotation.x = -.5 * Math.PI
            plane.position.x = 15
            plane.position.y = 0
            plane.position.z = 0
            scene.add(plane)
            var cubeGeometry = new THREE.BoxGeometry(2, 3, 4)///////////////
            var cubeMaterial = new THREE.MeshBasicMaterial(
                    {
                        color: 0xff0000,////////
                        wireframe: true
                    }
           /// }
            )
            var cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
            cube, position.x = 4
            cube.position.y = 2
            cube.posistion.z = 3//////////
            scene.add(cube)
            //        var squareGeometry=new THREE.squareGeometry(5)
            var squareGeometry = new THREE.SpereGeometry(4, 20, 20)
            var squareMaterial = new THREE.MeshBasicMaterial(
                    {
                        color: 0xff0000,
                        wireframe: false
                    }
            )
            var square = new THREE.Mesh(squareGeometry, squareMaterial)
            square, position.x = 25
            square.position.y = 40
            square.position.z = 30
            scene.add(square)

            camera.position.x = -5
            camera.position.y = 6
            camera.position.z = 10
            camera.LookAt(scene.position)/////////////
            $(document.body).append(renderer.domElement)
            renderer.render(scene, camera)
        });////////////////
    </script>
    <style>
        body{
            margin: 0;
            overflow: hidden;
        }
        </style>
</head>
<body>

</body>
    评论

报告相同问题？

悬赏问题

  • ¥15 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题：最近需要用CAT工具Trados进行一些开发
  • ¥15 南大pa1 小游戏没有界面，并且报了如下错误，尝试过换显卡驱动，但是好像不行
  • ¥15 没有证书，nginx怎么反向代理到只能接受https的公网网站
  • ¥50 成都蓉城足球俱乐部小程序抢票
  • ¥15 yolov7训练自己的数据集
  • ¥15 esp8266与51单片机连接问题(标签-单片机|关键词-串口)（相关搜索：51单片机|单片机|测试代码）
  • ¥15 电力市场出清matlab yalmip kkt 双层优化问题
  • ¥30 ros小车路径规划实现不了，如何解决？(操作系统-ubuntu)